├── index.html ├── jsquiz.js └── mystyle.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Baby animal names 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Choose the correct animal baby names!

14 | 15 |
16 | 17 |
18 |
19 |
Next Question
20 |
21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /jsquiz.js: -------------------------------------------------------------------------------- 1 | 2 | var questions = [{ 3 | question: "What is the baby of a Moth known as?", 4 | choices: ["baby", "infant", "kit", "larva"], 5 | correctAnswer: 3 6 | }, { 7 | question: "What is the adult of a kid called", 8 | choices: ["calf", "doe", "goat", "chick"], 9 | correctAnswer: 2 10 | }, { 11 | question: "What is the young of Bufallo called?", 12 | choices: ["calf", "baby", "pup","cow"], 13 | correctAnswer: 0 14 | }, { 15 | question: "What a baby Aligator called?", 16 | choices: ["baby", "gator", "hatchling", "calf"], 17 | correctAnswer: 2 18 | }, { 19 | question: "What is a baby Goose called?", 20 | choices: ["gooser", "gosling", "gup", "pup"], 21 | correctAnswer: 1 22 | }, { 23 | question: "What is a baby Hamster called?", 24 | choices: ["pup", "chick", "infant", "billy"], 25 | correctAnswer: 0 26 | 27 | }, { 28 | question: "What is a baby Hawk called?", 29 | choices: ["hawklett", "pup", "larva", "eyas"], 30 | correctAnswer: 3 31 | }, { 32 | question: "What is a baby grasshopper called?", 33 | choices: ["hopper", "nymph", "stick", "pup"], 34 | correctAnswer: 1 35 | }, { 36 | question: "What is a baby Kangaroo called?", 37 | choices: ["kinga", "joey", "calf", "baby"], 38 | correctAnswer: 1 39 | 40 | }, { 41 | question: "What is a baby Whale called?", 42 | choices: ["whala", "cub", "grub", "infant"], 43 | correctAnswer: 1 44 | 45 | }, { 46 | question: "What is a baby Monkey called?", 47 | choices: ["infant", "baby", "calf", "pup"], 48 | correctAnswer: 0 49 | 50 | }, { 51 | question: "What is a baby Bear Called?", 52 | choices: ["cub", "baby balu", "young bear", "bearlet"], 53 | correctAnswer: 0 54 | }]; 55 | 56 | var currentQuestion = 0; 57 | var correctAnswers = 0; 58 | var quizOver = false; 59 | 60 | $(document).ready(function () { 61 | 62 | // Display the first question 63 | displayCurrentQuestion(); 64 | $(this).find(".quizMessage").hide(); 65 | 66 | // On clicking next, display the next question 67 | $(this).find(".nextButton").on("click", function () { 68 | if (!quizOver) { 69 | 70 | value = $("input[type='radio']:checked").val(); 71 | 72 | if (value == undefined) { 73 | $(document).find(".quizMessage").text("Please select an answer"); 74 | $(document).find(".quizMessage").show(); 75 | } else { 76 | // TODO: Remove any message -> not sure if this is efficient to call this each time.... 77 | $(document).find(".quizMessage").hide(); 78 | 79 | if (value == questions[currentQuestion].correctAnswer) { 80 | correctAnswers++; 81 | } 82 | 83 | currentQuestion++; // Since we have already displayed the first question on DOM ready 84 | if (currentQuestion < questions.length) { 85 | displayCurrentQuestion(); 86 | } else { 87 | displayScore(); 88 | // $(document).find(".nextButton").toggle(); 89 | // $(document).find(".playAgainButton").toggle(); 90 | // Change the text in the next button to ask if user wants to play again 91 | $(document).find(".nextButton").text("Play Again?"); 92 | quizOver = true; 93 | } 94 | } 95 | } else { // quiz is over and clicked the next button (which now displays 'Play Again?' 96 | quizOver = false; 97 | $(document).find(".nextButton").text("Next Question"); 98 | resetQuiz(); 99 | displayCurrentQuestion(); 100 | hideScore(); 101 | } 102 | }); 103 | 104 | }); 105 | 106 | // This displays the current question AND the choices 107 | function displayCurrentQuestion() { 108 | 109 | console.log("In display current Question"); 110 | 111 | var question = questions[currentQuestion].question; 112 | var questionClass = $(document).find(".quizContainer > .question"); 113 | var choiceList = $(document).find(".quizContainer > .choiceList"); 114 | var numChoices = questions[currentQuestion].choices.length; 115 | 116 | // Set the questionClass text to the current question 117 | $(questionClass).text(question); 118 | 119 | // Remove all current
  • elements (if any) 120 | $(choiceList).find("li").remove(); 121 | 122 | var choice; 123 | for (i = 0; i < numChoices; i++) { 124 | choice = questions[currentQuestion].choices[i]; 125 | $('
  • ' + choice + '
    • ').appendTo(choiceList); 126 | } 127 | } 128 | 129 | function resetQuiz() { 130 | currentQuestion = 0; 131 | correctAnswers = 0; 132 | hideScore(); 133 | } 134 | 135 | function displayScore() { 136 | $(document).find(".quizContainer > .result").text("You scored: " + correctAnswers + " out of: " + questions.length); 137 | $(document).find(".quizContainer > .result").show(); 138 | } 139 | 140 | function hideScore() { 141 | $(document).find(".result").hide(); 142 | } -------------------------------------------------------------------------------- /mystyle.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Rokkitt); 2 | h1 { 3 | font-family:'Rokkitt', serif; 4 | text-align: center; 5 | color:#fff; 6 | font-size:35px; 7 | } 8 | ul { 9 | list-style: none; 10 | } 11 | li { 12 | font-family:'Rokkitt', serif; 13 | font-size: 2em; 14 | color:#feb135; 15 | } 16 | input[type=radio] { 17 | border: 0px; 18 | width: 20px; 19 | height: 2em; 20 | 21 | } 22 | p { 23 | font-family:'Rokkitt', serif; 24 | } 25 | /* Quiz Classes */ 26 | .quizContainer { 27 | background-color:#000398; 28 | border-radius: 8px; 29 | width: 75%; 30 | margin: auto; 31 | margin-top: 190px; 32 | padding-top: 5px; 33 | /*-moz-box-shadow: 10px 10px 5px #888; 34 | -webkit-box-shadow: 10px 10px 5px #888; 35 | box-shadow: 10px 10px 5px #888;*/ 36 | position: relative; 37 | } 38 | .nextButton { 39 | /*box-shadow: 3px 3px 5px #888;*/ 40 | border-radius: 6px; 41 | width: 150px; 42 | height: 40px; 43 | text-align: center; 44 | background-color:#cc0000; 45 | /*clear: both;*/ 46 | color:#fff; 47 | font-family:'Rokkitt', serif; 48 | font-weight:bold; 49 | position: relative; 50 | margin: auto; 51 | padding-top: 20px; 52 | } 53 | .question { 54 | font-family:'Rokkitt', serif; 55 | font-size: 2em; 56 | width: 90%; 57 | height: auto; 58 | margin: auto; 59 | border-radius: 6px; 60 | background-color:#f2f205; 61 | text-align: center; 62 | color:#27a63; 63 | } 64 | .quizMessage { 65 | background-color: peachpuff; 66 | border-radius: 6px; 67 | width: 30%; 68 | margin: auto; 69 | text-align: center; 70 | padding: 2px; 71 | font-family:'Rokkitt', serif; 72 | color: red; 73 | } 74 | .choiceList { 75 | font-family: Courier, serif; 76 | color: blueviolet; 77 | } 78 | .result { 79 | width: 30%; 80 | height: auto;; 81 | border-radius: 6px; 82 | background-color: linen; 83 | margin: auto; 84 | margin-bottom:35px; 85 | text-align: center; 86 | font-family:'Rokkitt', serif; 87 | } 88 | /* End of Quiz Classes */ --------------------------------------------------------------------------------