Skip to content

Commit

Permalink
Gave the test an official Riot treatment, some grammar fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Tabitha Farnsworth committed Apr 12, 2013
1 parent 8a2b157 commit 25416c8
Show file tree
Hide file tree
Showing 9 changed files with 191 additions and 94 deletions.
64 changes: 64 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
body {
background: #000 url(../img/bg_final.jpg) no-repeat center top;
margin: 0;
padding: 0;
font-family: Arial,sans-serif;
font-size: 15px;
color: #CCC;
}

a, a:visited {
color: #EE2E24;
text-decoration: none;
}

#headwrap {
background: #000 url(../img/bg-header.jpg) no-repeat center top;
width: 100%;
margin-bottom: 30px;
}

.head {
background: url(../img/bg-nav.jpg) no-repeat center;
height: 112px;
text-align: center;
margin: 0 auto;
width: 1000px;
}

.logo {
background: url(../img/logo.jpg) no-repeat;
height: 112px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
width: 200px;
margin: 0 auto;
}

#content {
background-color: #131313;
box-shadow: 0px 16px 20px 6px #000000;
-moz-box-shadow: 0px 16px 20px 6px #000000;
-webkit-box-shadow: 0px 16px 20px 6px #000000;
filter: progid:DXImageTransform.Microsoft.Shadow(strength= 16,direction = 180,color = '#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 16,Direction = 180,Color = '#000000')";
margin: 0 auto 70px auto;
padding: 40px 0 0;
position: relative;
width: 1000px;
padding: 40px 25px;
}

h1 {
font-family: Arial,sans-serif;
letter-spacing: -6px;
font-size: 72px;
line-height: 58px;
margin: 0 0 18px;
color: #fff;
}

span.red {
color: #DC291E;
}
Binary file added img/bg-header.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/bg-nav.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/bg_final.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/logo.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 22 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,33 @@
<html>
<head>
<title>Frontend Coding Test</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="headwrap">
<div class="head">
<div class="logo">Riot Games</div>
</div>
</div>

<h1>Frontend Coding Test</h1>
<p>
Below is a series of links to problems, each problem is an HTML file that contains the explaination of the problem as well as a partial solution.
</p>
<p>
Please complete the HTML/CSS/JavaScript code in the problem file in order to solve it and send the completed code back to us to review. Feel free to put comments in the HTML file to explain your solution.
</p>
<div id="content">

<h2>Problems</h2>
<h1><span class="red">Frontend</span> Coding Test</h1>
<p>
Below is a series of links to problems. Each problem is an HTML file that contains the explanation of the problem as well as a partial solution.
</p>
<p>
Please complete the HTML/CSS/JavaScript code in the problem file in order to solve it and send the completed code back to us to review. Feel free to put comments in the HTML file to explain your solution.
</p>

<ul>
<li><a href="problems/image_rotator.html">Image Rotator</a></li>
<li><a href="problems/click_squares.html">Click Squares</a></li>
<li><a href="problems/text_search.html">Text Search</a></li>
</ul>
<h2>Problems</h2>

<ul>
<li><a href="problems/image_rotator.html">Image Rotator</a></li>
<li><a href="problems/click_squares.html">Click Squares</a></li>
<li><a href="problems/text_search.html">Text Search</a></li>
</ul>
</div>

</body>
</html>
80 changes: 44 additions & 36 deletions problems/click_squares.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html>
<head>
<title>Frontend Coding Test</title>
<link type="text/css" rel="stylesheet" href="../css/style.css" />
<style type="text/css">
#squares div {
border: 1px solid black;
Expand Down Expand Up @@ -33,59 +34,66 @@
</style>
</head>
<body>
<div id="headwrap">
<div class="head">
<div class="logo">Riot Games</div>
</div>
</div>

<h1>Click Squares</h1>
<div id="content">
<h1><span class="red">Click</span> Squares</h1>

<p>
Using the squares at the bottom of the page, modify the CSS such that they display like this:
</p>
<p>
Using the squares at the bottom of the page, modify the CSS such that they display like this:
</p>

<img src="../img/click_square_ex1.png" />
<img src="../img/click_square_ex1.png" />

<p>
Next add JavaScript so that when any of the three squares is clicked, that square, and only that square changes color to look like this:
</p>
<p>
Next add JavaScript so that when any of the three squares is clicked, that square, and only that square changes color to look like this:
</p>

<img src="../img/click_square_ex2.png" />
<img src="../img/click_square_ex2.png" />

<p>
If a grey square is clicked it should return to its original color, and only one square can be grey at a time.
<p>
If a grey square is clicked it should return to its original color, and only one square can be grey at a time.

If for example I click Square C as shown in the second picture, and it turns grey, when I click Square B, Square C should return to its original color and Square B should be the only square that is grey.
</p>
If for example I click Square C as shown in the second picture, and it turns grey, when I click Square B, Square C should return to its original color and Square B should be the only square that is grey.
</p>

<p>
This is shown in the picture below:
</p>
<p>
This is shown in the picture below:
</p>

<img src="../img/click_square_ex3.png" />
<img src="../img/click_square_ex3.png" />

<h3>Colors Used</h3>
<h3>Colors Used</h3>

<dl>
<dt>Square A</dt>
<dd>#fff039 <div class="swatch" style="background: #fff039"></div></dd>
<dl>
<dt>Square A</dt>
<dd>#fff039 <div class="swatch" style="background: #fff039"></div></dd>

<dt>Square B</dt>
<dd>#00ade8 <div class="swatch" style="background: #00ade8"></div></dd>
<dt>Square B</dt>
<dd>#00ade8 <div class="swatch" style="background: #00ade8"></div></dd>

<dt>Square C</dt>
<dd>#f1679c <div class="swatch" style="background: #f1679c"></div></dd>
<dt>Square C</dt>
<dd>#f1679c <div class="swatch" style="background: #f1679c"></div></dd>

<dt>Grey Square</dt>
<dd>#939393 <div class="swatch" style="background: #939393"></div></dd>
<dt>Grey Square</dt>
<dd>#939393 <div class="swatch" style="background: #939393"></div></dd>

</dl>
</dl>

<hr/>
<hr/>

<div id="squares">
<div id="square_a">
Square A
<div id="square_b">
Square B
<div id="square_c">
Square C
<div id="squares">
<div id="square_a">
Square A
<div id="square_b">
Square B
<div id="square_c">
Square C
</div>
</div>
</div>
</div>
Expand Down
30 changes: 19 additions & 11 deletions problems/image_rotator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html>
<head>
<title>Frontend Coding Test</title>
<link type="text/css" rel="stylesheet" href="../css/style.css" />
<style type="text/css">
#rotator {
width: 150px;
Expand All @@ -14,21 +15,28 @@
</style>
</head>
<body>
<div id="headwrap">
<div class="head">
<div class="logo">Riot Games</div>
</div>
</div>

<h1>Image Rotator</h1>
<p>
Using the below image, make a rotator that shows only one of the lettered sections every 3 seconds.
</p>
<p>
For example, the first letter shown should be A, after 3 seconds, it should goto B and then C. After C it should go back to A, and every 3 seconds it should continue to cycle.
</p>
<div id="content">
<h1><span class="red">Image</span> Rotator</h1>
<p>
Using the below image, make a rotator that shows only one of the lettered sections every 3 seconds.
</p>
<p>
For example, the first letter shown should be A, after 3 seconds, it should goto B and then C. After C it should go back to A, and every 3 seconds it should continue to cycle.
</p>

<img src="../img/letter_sprite_1.jpg" />
<img src="../img/letter_sprite_1.jpg" />

<hr/>
<hr/>

<div id="rotator">
Rotator Here
<div id="rotator">
Rotator Here
</div>
</div>

</body>
Expand Down
76 changes: 42 additions & 34 deletions problems/text_search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,57 @@
<html>
<head>
<title>Frontend Coding Test | Text Search</title>
<link type="text/css" rel="stylesheet" href="../css/style.css" />
</head>
<body>
<div id="headwrap">
<div class="head">
<div class="logo">Riot Games</div>
</div>
</div>

<h1>Text Search</h1>
<p>
There are two main components below, a search form and a text article about turtles. The form should be setup such that a word or phase can be entered in the search form, and the number of occurences of that phrase is shown below.
</p>
<p>
For example, in the below text there are two occurences of the word "Testudines" so if you put that word in the search form, and submit, the results should say:

<i>Found 2 occurances of the word "Testudines" in the below text.</i>
</p>
<p>
Keep in mind that words can be contained within multiple levels of HTML elements, and phrases may cross those HTML element boundaries.
</p>

<hr/>

<h2>Search</h2>
<form>
<input type="text" id="search_input" value="llama" />
<input type="submit" value="Search" />
</form>

<h3>Results</h3>
Found 0 occurances of the word "llama" in the below text.

<hr/>

<h2>Search Text</h2>
<div id="search_text">
<p>
<b>Turtles</b> are <a href="/wiki/Reptile" title="Reptile">reptiles</a> of the <a href="/wiki/Order_(biology)" title="Order (biology)">order</a> <b>Chelonii</b><sup id="cite_ref-Dubois_2-0" class="reference"><a href="#cite_note-Dubois-2"><span>[</span>2<span>]</span></a></sup> or <b>Testudines</b> characterised by a special <a href="/wiki/Bone" title="Bone">bony</a> or <a href="/wiki/Cartilage" title="Cartilage">cartilaginous</a> <a href="/wiki/Animal_shell" title="Animal shell" class="mw-redirect">shell</a> developed from their <a href="/wiki/Rib" title="Rib">ribs</a> and acting as a <a href="/wiki/Shield" title="Shield">shield</a>.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span>[</span>3<span>]</span></a></sup> "Turtle" may either refer to the order as a whole, or to particular turtles which make up a <a href="/wiki/Form_taxon" title="Form taxon" class="mw-redirect">form taxon</a> that is not <a href="/wiki/Monophyletic" title="Monophyletic" class="mw-redirect">monophyletic</a>.
</p>
<div id="content">
<h1><span class="red">Text</span> Search</h1>
<p>
The order Chelonii or Testudines includes both extant (living) and <a href="/wiki/Extinction" title="Extinction">extinct</a> species. The earliest known turtles date from <span class="nourlexpansion plainlinks" style="white-space:nowrap;"><a rel="nofollow" class="external text" href="http://toolserver.org/~verisimilus/Timeline/Timeline.php?Ma=220">220</a> <a href="/wiki/Million_years_ago" title="Million years ago" class="mw-redirect">million years ago</a></span>,<sup id="cite_ref-Li-etal_4-0" class="reference"><a href="#cite_note-Li-etal-4"><span>[</span>4<span>]</span></a></sup> making turtles one of the oldest reptile groups and a more ancient group than <a href="/wiki/Lizard" title="Lizard">lizards</a>, <a href="/wiki/Snake" title="Snake">snakes</a> or <a href="/wiki/Crocodile" title="Crocodile">crocodiles</a>. Of the many <a href="/wiki/Species" title="Species">species</a> alive today, some are highly <a href="/wiki/Endangered_species" title="Endangered species">endangered</a>.<sup id="cite_ref-barzyk_5-0" class="reference"><a href="#cite_note-barzyk-5"><span>[</span>5<span>]</span></a></sup>
There are two main components below, a search form and a text article about turtles. The form should be setup such that a word or phase can be entered in the search form, and the number of occurences of that phrase is shown below.
</p>
<p>
Like all other extant reptiles, turtles are <a href="/wiki/Ectotherm" title="Ectotherm">ectotherms</a> their internal temperature varies according to the ambient environment, commonly called <a href="/wiki/Poikilotherm" title="Poikilotherm">cold-blooded</a>. However, because of their high metabolic rate, <a href="/wiki/Leatherback_sea_turtle" title="Leatherback sea turtle">leatherback sea turtles</a> have a body temperature that is noticeably higher than that of the surrounding water.
For example, in the below text there are two occurences of the word "Testudines" so if you put that word in the search form, and submit, the results should say:

<i>Found 2 occurances of the word "Testudines" in the below text.</i>
</p>
<p>
Like other <a href="/wiki/Amniote" title="Amniote">amniotes</a> (reptiles, dinosaurs, birds, and mammals), they breathe air and do not lay eggs underwater, although many species live in or around water. The largest turtles are aquatic.
Keep in mind that words can be contained within multiple levels of HTML elements, and phrases may cross those HTML element boundaries.
</p>

<hr/>

<h2>Search</h2>
<form>
<input type="text" id="search_input" value="llama" />
<input type="submit" value="Search" />
</form>

<h3>Results</h3>
Found 0 occurances of the word "llama" in the below text.

<hr/>

<h2>Search Text</h2>
<div id="search_text">
<p>
<b>Turtles</b> are <a href="/wiki/Reptile" title="Reptile">reptiles</a> of the <a href="/wiki/Order_(biology)" title="Order (biology)">order</a> <b>Chelonii</b><sup id="cite_ref-Dubois_2-0" class="reference"><a href="#cite_note-Dubois-2"><span>[</span>2<span>]</span></a></sup> or <b>Testudines</b> characterised by a special <a href="/wiki/Bone" title="Bone">bony</a> or <a href="/wiki/Cartilage" title="Cartilage">cartilaginous</a> <a href="/wiki/Animal_shell" title="Animal shell" class="mw-redirect">shell</a> developed from their <a href="/wiki/Rib" title="Rib">ribs</a> and acting as a <a href="/wiki/Shield" title="Shield">shield</a>.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span>[</span>3<span>]</span></a></sup> "Turtle" may either refer to the order as a whole, or to particular turtles which make up a <a href="/wiki/Form_taxon" title="Form taxon" class="mw-redirect">form taxon</a> that is not <a href="/wiki/Monophyletic" title="Monophyletic" class="mw-redirect">monophyletic</a>.
</p>
<p>
The order Chelonii or Testudines includes both extant (living) and <a href="/wiki/Extinction" title="Extinction">extinct</a> species. The earliest known turtles date from <span class="nourlexpansion plainlinks" style="white-space:nowrap;"><a rel="nofollow" class="external text" href="http://toolserver.org/~verisimilus/Timeline/Timeline.php?Ma=220">220</a> <a href="/wiki/Million_years_ago" title="Million years ago" class="mw-redirect">million years ago</a></span>,<sup id="cite_ref-Li-etal_4-0" class="reference"><a href="#cite_note-Li-etal-4"><span>[</span>4<span>]</span></a></sup> making turtles one of the oldest reptile groups and a more ancient group than <a href="/wiki/Lizard" title="Lizard">lizards</a>, <a href="/wiki/Snake" title="Snake">snakes</a> or <a href="/wiki/Crocodile" title="Crocodile">crocodiles</a>. Of the many <a href="/wiki/Species" title="Species">species</a> alive today, some are highly <a href="/wiki/Endangered_species" title="Endangered species">endangered</a>.<sup id="cite_ref-barzyk_5-0" class="reference"><a href="#cite_note-barzyk-5"><span>[</span>5<span>]</span></a></sup>
</p>
<p>
Like all other extant reptiles, turtles are <a href="/wiki/Ectotherm" title="Ectotherm">ectotherms</a> their internal temperature varies according to the ambient environment, commonly called <a href="/wiki/Poikilotherm" title="Poikilotherm">cold-blooded</a>. However, because of their high metabolic rate, <a href="/wiki/Leatherback_sea_turtle" title="Leatherback sea turtle">leatherback sea turtles</a> have a body temperature that is noticeably higher than that of the surrounding water.
</p>
<p>
Like other <a href="/wiki/Amniote" title="Amniote">amniotes</a> (reptiles, dinosaurs, birds, and mammals), they breathe air and do not lay eggs underwater, although many species live in or around water. The largest turtles are aquatic.
</p>
</div>
</div>

</body>
Expand Down

0 comments on commit 25416c8

Please sign in to comment.