Add quiz app practicing prototype and inheritance

sicktastic · Jun 1, 2016 · 081cd2f · 081cd2f
1 parent 8b689a0
commit 081cd2f
Show file tree

Hide file tree

Showing 6 changed files with 736 additions and 0 deletions.
diff --git a/object_oriented_javascript/quiz/app.js b/object_oriented_javascript/quiz/app.js
@@ -0,0 +1,11 @@
+//Create Questions
+var questions = [
+    new Question("Who was the first President of the United States?", [ "George Washington", "Thomas Jefferson" ], "George Washington"),
+    new Question("What is the answer to the Ultimate Question of Life, the Universe, and Everything?", ["Pi","42"], "42")
+];
+
+//Create Quiz
+var quiz = new Quiz(questions);
+
+//Display Quiz
+QuizUI.displayNext();
diff --git a/object_oriented_javascript/quiz/index.html b/object_oriented_javascript/quiz/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>Amazing Quiz</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+
+<div class="grid">
+    <div id="quiz" class="centered grid__col--8">
+        <h1>Awesome Quiz</h1>
+
+        <h2 id="question" class="headline-secondary--grouped"></h2>
+        <h3 id="score"></h3>
+
+        <p id="choice0"></p>
+        <button id="guess0" class="btn--default">Select Answer</button>
+
+        <p id="choice1"></p>
+        <button id="guess1" class="btn--default">Select Answer</button>
+
+        <footer>
+            <p id="progress">Question x of y</p>
+        </footer>
+    </div>
+</div>
+
+<script src="quiz.js"></script>
+<script src="question.js"></script>
+<script src="quiz_ui.js"></script>
+<script src="app.js"></script>
+</body>
+</html>
diff --git a/object_oriented_javascript/quiz/question.js b/object_oriented_javascript/quiz/question.js
@@ -0,0 +1,9 @@
+function Question(text, choices, answer) {
+    this.text = text;
+    this.choices = choices;
+    this.answer = answer;
+}
+
+Question.prototype.isCorrectAnswer = function (choice) {
+    return this.answer === choice;
+};
diff --git a/object_oriented_javascript/quiz/quiz.js b/object_oriented_javascript/quiz/quiz.js
@@ -0,0 +1,20 @@
+function Quiz(questions) {
+    this.score = 0;
+    this.questions = questions;
+    this.currentQuestionIndex = 0;
+}
+
+Quiz.prototype.guess = function(answer) {
+    if(this.getCurrentQuestion().isCorrectAnswer(answer)) {
+        this.score++;
+    }
+    this.currentQuestionIndex++;
+};
+
+Quiz.prototype.getCurrentQuestion = function() {
+    return this.questions[this.currentQuestionIndex];
+};
+
+Quiz.prototype.hasEnded = function() {
+    return this.currentQuestionIndex >= this.questions.length;
+};
diff --git a/object_oriented_javascript/quiz/quiz_ui.js b/object_oriented_javascript/quiz/quiz_ui.js
@@ -0,0 +1,44 @@
+var QuizUI = {
+    displayNext: function () {
+        if (quiz.hasEnded()) {
+            this.displayScore();
+        } else {
+            this.displayQuestion();
+            this.displayChoices();
+            this.displayProgress();
+        }
+    },
+    displayQuestion: function() {
+        this.populateIdWithHTML("question", quiz.getCurrentQuestion().text);
+    },
+    displayChoices: function() {
+        var choices = quiz.getCurrentQuestion().choices;
+
+        for(var i = 0; i < choices.length; i++) {
+            this.populateIdWithHTML("choice" + i, choices[i]);
+            this.guessHandler("guess" + i, choices[i]);
+        }
+    },
+    displayScore: function() {
+        var gameOverHTML = "<h1>Game Over</h1>";
+        gameOverHTML += "<h2> Your score is: " + quiz.score + "</h2>";
+        this.populateIdWithHTML("quiz", gameOverHTML);
+    },
+
+    populateIdWithHTML: function(id, text) {
+        var element = document.getElementById(id);
+        element.innerHTML = text;
+    },
+    guessHandler: function(id, guess) {
+        var button = document.getElementById(id);
+        button.onclick = function() {
+            quiz.guess(guess);
+            QuizUI.displayNext();
+        }
+    },
+
+    displayProgress: function() {
+        var currentQuestionNumber = quiz.currentQuestionIndex + 1;
+        this.populateIdWithHTML("progress", "Question " + currentQuestionNumber + " of " + quiz.questions.length);
+    }
+};