Adding Dynamic Quiz :) (#223)

Git21221 · Oct 3, 2023 · cf8b134 · cf8b134
2 parents 98ba215 + f44b653
commit cf8b134
Show file tree

Hide file tree

Showing 4 changed files with 269 additions and 0 deletions.
diff --git a/Dynamic Quiz/index.html b/Dynamic Quiz/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Dynamic Quiz Project</title>
+		<link type='text/css' rel='stylesheet' href='style.css'/>
+		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open Sans"/>
+	</head>
+	<body>
+		<div id='container'>
+			<div id='title'>
+				<h1>Learning Js Properly: Project #1 - Dynamic Quiz</h1>
+			</div>
+   			<br/>
+  			<div id='quiz'></div>
+    		<div class='button' id='next'><a href='#'>Next</a></div>
+    		<div class='button' id='prev'><a href='#'>Prev</a></div>
+    		<div class='button' id='start'> <a href='#'>Start Over</a></div>
+    		<!-- <button class='' id='next'>Next</a></button>
+    		<button class='' id='prev'>Prev</a></button>
+    		<button class='' id='start'> Start Over</a></button> -->
+    	</div>
+
+		<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
+		<script type="text/javascript" src='questions.json'></script>
+        <script src="/Dynamic Quiz/script.js"></script>
+	</body>
+</html>
diff --git a/Dynamic Quiz/script.js b/Dynamic Quiz/script.js
@@ -0,0 +1,167 @@
+(function () {
+    var questions = [{
+        question: "What is 2*5?",
+        choices: [2, 5, 10, 15, 20],
+        correctAnswer: 2
+    }, {
+        question: "What is 3*6?",
+        choices: [3, 6, 9, 12, 18],
+        correctAnswer: 4
+    }, {
+        question: "What is 8*9?",
+        choices: [72, 99, 108, 134, 156],
+        correctAnswer: 0
+    }, {
+        question: "What is 1*7?",
+        choices: [4, 5, 6, 7, 8],
+        correctAnswer: 3
+    }, {
+        question: "What is 8*8?",
+        choices: [20, 30, 40, 50, 64],
+        correctAnswer: 4
+    }];
+
+    var questionCounter = 0; //Tracks question number
+    var selections = []; //Array containing user choices
+    var quiz = $('#quiz'); //Quiz div object
+
+    // Display initial question
+    displayNext();
+
+    // Click handler for the 'next' button
+    $('#next').on('click', function (e) {
+        e.preventDefault();
+
+        // Suspend click listener during fade animation
+        if (quiz.is(':animated')) {
+            return false;
+        }
+        choose();
+
+        // If no user selection, progress is stopped
+        if (isNaN(selections[questionCounter])) {
+            alert('Please make a selection!');
+        } else {
+            questionCounter++;
+            displayNext();
+        }
+    });
+
+    // Click handler for the 'prev' button
+    $('#prev').on('click', function (e) {
+        e.preventDefault();
+
+        if (quiz.is(':animated')) {
+            return false;
+        }
+        choose();
+        questionCounter--;
+        displayNext();
+    });
+
+    // Click handler for the 'Start Over' button
+    $('#start').on('click', function (e) {
+        e.preventDefault();
+
+        if (quiz.is(':animated')) {
+            return false;
+        }
+        questionCounter = 0;
+        selections = [];
+        displayNext();
+        $('#start').hide();
+    });
+
+    // Animates buttons on hover
+    $('.button').on('mouseenter', function () {
+        $(this).addClass('active');
+    });
+    $('.button').on('mouseleave', function () {
+        $(this).removeClass('active');
+    });
+
+    // Creates and returns the div that contains the questions and 
+    // the answer selections
+    function createQuestionElement(index) {
+        var qElement = $('<div>', {
+            id: 'question'
+        });
+
+        var header = $('<h2>Question ' + (index + 1) + ':</h2>');
+        qElement.append(header);
+
+        var question = $('<p>').append(questions[index].question);
+        qElement.append(question);
+
+        var radioButtons = createRadios(index);
+        qElement.append(radioButtons);
+
+        return qElement;
+    }
+
+    // Creates a list of the answer choices as radio inputs
+    function createRadios(index) {
+        var radioList = $('<ul>');
+        var item;
+        var input = '';
+        for (var i = 0; i < questions[index].choices.length; i++) {
+            item = $('<li>');
+            input = '<input type="radio" name="answer" value=' + i + ' />';
+            input += questions[index].choices[i];
+            item.append(input);
+            radioList.append(item);
+        }
+        return radioList;
+    }
+
+    // Reads the user selection and pushes the value to an array
+    function choose() {
+        selections[questionCounter] = +$('input[name="answer"]:checked').val();
+    }
+
+    // Displays next requested element
+    function displayNext() {
+        quiz.fadeOut(function () {
+            $('#question').remove();
+
+            if (questionCounter < questions.length) {
+                var nextQuestion = createQuestionElement(questionCounter);
+                quiz.append(nextQuestion).fadeIn();
+                if (!(isNaN(selections[questionCounter]))) {
+                    $('input[value=' + selections[questionCounter] + ']').prop('checked', true);
+                }
+
+                // Controls display of 'prev' button
+                if (questionCounter === 1) {
+                    $('#prev').show();
+                } else if (questionCounter === 0) {
+
+                    $('#prev').hide();
+                    $('#next').show();
+                }
+            } else {
+                var scoreElem = displayScore();
+                quiz.append(scoreElem).fadeIn();
+                $('#next').hide();
+                $('#prev').hide();
+                $('#start').show();
+            }
+        });
+    }
+
+    // Computes score and returns a paragraph element to be displayed
+    function displayScore() {
+        var score = $('<p>', { id: 'question' });
+
+        var numCorrect = 0;
+        for (var i = 0; i < selections.length; i++) {
+            if (selections[i] === questions[i].correctAnswer) {
+                numCorrect++;
+            }
+        }
+
+        score.append('You got ' + numCorrect + ' questions out of ' +
+            questions.length + ' right!!!');
+        return score;
+    }
+})();
diff --git a/Dynamic Quiz/style.css b/Dynamic Quiz/style.css
@@ -0,0 +1,71 @@
+body {
+    font-family: Open Sans;
+}
+
+h1 {
+    text-align: center;
+}
+
+#title {
+    text-decoration: underline;
+}
+
+#quiz {
+    text-indent: 10px;
+    display: none;
+}
+
+.button {
+    border: 4px solid;
+    border-radius: 5px;
+    width: 40px;
+    padding-left: 5px;
+    padding-right: 5px;
+    position: relative;
+    float: right;
+    background-color: #DCDCDC;
+    color: black;
+    margin: 0 2px 0 2px;
+}
+
+.button.active {
+    background-color: #F8F8FF;
+    color: #525252;
+}
+
+button {
+    position: relative;
+    float: right;
+}
+
+.button a {
+    text-decoration: none;
+    color: black;
+}
+
+#container {
+    width: 50%;
+    margin: auto;
+    padding: 0 25px 40px 10px;
+    background-color: #1E90FF;
+    border: 4px solid #B0E0E6;
+    border-radius: 5px;
+    color: #FFFFFF;
+    font-weight: bold;
+    box-shadow: 5px 5px 5px #888;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+#prev {
+    display: none;
+}
+
+#start {
+    display: none;
+    width: 90px;
+}
diff --git a/index.html b/index.html
@@ -350,6 +350,10 @@ <h1>Small JavaScript Projects</h1>
         <div class="projectCard">
         <div class="projectsName">Counter</div> </div>
       </a>
+      <a href="Dynamic Quiz/index.html" class="projectLink">
+        <div class="projectCard">
+        <div class="projectsName">Dynamic Quiz</div> </div>
+      </a>
   </section>
   <script src="js/script.js"></script>
 </body>