Initial Commit

alifrumin · Oct 26, 2015 · 85990e3 · 85990e3
1 parent 54a530f
commit 85990e3
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 0 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,16 @@
+#colorBox {
+  border: 3px solid black;
+  height: 50px;
+  width: 50px;
+  background: orange;
+  margin: 20px
+}
+
+h4 {
+  margin: 0;
+  padding: 0;
+}
+
+.hintDisplay {
+  display: none;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Trivia</title>
+	<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
+	<script src="script.js"></script>
+	<link rel="stylesheet" type="text/css" href="css/styles.css">
+</head>
+<body>
+  <div class="container">
+	<h1>Trivia</h1>
+		<h4 id="totalQuestions">Number of Questions:  </h4>
+		<h4>Number of Questions you have answered</h4>
+		<h4>Number of Questions you have gotten correct</h4>
+    <div class="question">
+      <h3>What color is this?</h3>
+      <div id="colorBox"></div>
+			<div class="hintDisplay">
+				<p>"Hint: is a fruit and a color"</p>
+			</div>
+      <input class="answer" type="text" placeholder="guess here...">
+      <button class="submit">Submit</button>
+      <button class="hintButton">Hint</button>
+			<button class="skip">Skip</button>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,31 @@
+$(document).ready(function(){
+
+  //Array of Question Objects
+  colorPrompts = [burlywood, salmon];
+
+  //Length of Question Array for Number of Questions
+  $("#totalQuestions").append(colorPrompts.length);
+
+  //check answer
+  $(".submit").on("click", function(){
+    if
+    (($(".answer").val()) == "orange")
+    {console.log("correct")}
+    if
+    (($(".answer").val()) !== "orange")
+    {console.log("incorrect, try the Hint!")}
+  });
+  //Display Hint when Hint Button Clicked
+  $(".hintButton").on("click", function(){
+    $(".hintDisplay").toggle()
+  });
+//Questions Objects
+  var burlywood = {
+    colorBox:"burlywood",
+    hint:"Rhymes with Twirly Hood",
+  };
+  var salmon = {
+    colorBox:"salmon",
+    hint:"Like the fish",
+  };
+});