From 6b8043ebcd967a7e6b0cc35ddeff141143005c70 Mon Sep 17 00:00:00 2001 From: Alice Frumin Date: Mon, 26 Oct 2015 21:49:45 -0400 Subject: [PATCH] edited css added more colors --- css/styles.css | 16 ++++++++++++---- index.html | 8 ++++---- script.js | 50 +++++++++++++++++++++++++++++++++++--------------- 3 files changed, 51 insertions(+), 23 deletions(-) diff --git a/css/styles.css b/css/styles.css index 4d9d42e..c4bb4c2 100644 --- a/css/styles.css +++ b/css/styles.css @@ -2,14 +2,14 @@ #colorBox { border: 3px solid black; - height: 50px; - width: 50px; - /*background: orange;*/ + height: 150px; + width: 150px; margin: 20px; margin-left: auto ; margin-right: auto ; - + border-radius: 50%; } + h1 { text-align: center; } @@ -24,8 +24,16 @@ h3 { .hintDisplay { display: none; + color: black; + font-family: sans-serif; + padding: 10px; } + .question { text-align: center; } + +a { + display: block; +} diff --git a/index.html b/index.html index a6fc128..c8fdd69 100644 --- a/index.html +++ b/index.html @@ -10,9 +10,9 @@

HTML Color Names Quiz

-

Number of Questions:

-

Number of Questions you have answered:

-

Number of Questions you have gotten correct:

+

# of Questions:

+

# of Questions Answered:

+

# Correct:

Name the color below:

@@ -23,7 +23,7 @@

Name the color below:

- + For a full list of colors
diff --git a/script.js b/script.js index a78d7d2..2513b1b 100644 --- a/script.js +++ b/script.js @@ -9,42 +9,55 @@ $(document).ready(function(){ }, salmon = { colorBoxColor:"salmon", - hint:"Like the fish", + hint:"Like the fish" + }, + tomato = { + colorBoxColor:"tomato", + hint:"often used to make pasta sauce" + }, + thistle = { + colorBoxColor:"thistle", + hint:"___ and Thyme" + }, + lawngreen = { + colorBoxColor:"lawngreen", + hint:"front ___ + color" + }, + dodgerblue = { + colorBoxColor:"dodgerblue", + hint:"LA baseball team + color" + }, + ghostwhite = { + colorBoxColor:"ghostwhite", + hint:"pale as a ghost" + }, + gainsboro = { + colorBoxColor:"gainsboro", + hint:"gainsboro" } ]; + //start $("#colorBox").css("background", colorPrompts[i].colorBoxColor) $(".hintDisplay").html(colorPrompts[i].hint) console.log(colorPrompts[i]); + //iterate through array function next(i){ $("#colorBox").css("background", colorPrompts[i].colorBoxColor) $(".hintDisplay").html(colorPrompts[i].hint) } - // // next item in Array - // function next(i){ - // $("#colorBox").css("background", this.colorBoxColor); - // $(".hintDisplay").html("

"+this.hint+"

"); - // i++; - // } //Length of Question Array for Number of Questions $("#totalQuestions").append(colorPrompts.length); - //check answer + //check answer on submit $(".submit").on("click", function(){ if (($(".answer").val()) === (colorPrompts[i].colorBoxColor)) {console.log(colorPrompts[i].colorBoxColor); i++; next(i); - // next(); - // console.log(i); - // next(); - // for (var i = 0; i < colorPrompts.length; i++) { - // colorPrompts[i] - // }; - //move to next item in Array //+1 to #correctQuestions //+1 to #answeredQuestions } @@ -60,4 +73,11 @@ $(document).ready(function(){ $(".hintButton").on("click", function(){ $(".hintDisplay").toggle() }); + + //Skip button + $(".skip").on("click", function(){ + i++; + next(i); + }); + });