From f44b65356eefdda242a169b541abd67e1a8d8fc3 Mon Sep 17 00:00:00 2001 From: kalash Date: Tue, 3 Oct 2023 17:15:22 +0530 Subject: [PATCH] Adding Dynamic Quiz :) --- Dynamic Quiz/index.html | 27 +++++++ Dynamic Quiz/script.js | 167 ++++++++++++++++++++++++++++++++++++++++ Dynamic Quiz/style.css | 71 +++++++++++++++++ index.html | 4 + 4 files changed, 269 insertions(+) create mode 100644 Dynamic Quiz/index.html create mode 100644 Dynamic Quiz/script.js create mode 100644 Dynamic Quiz/style.css diff --git a/Dynamic Quiz/index.html b/Dynamic Quiz/index.html new file mode 100644 index 0000000..476f9ea --- /dev/null +++ b/Dynamic Quiz/index.html @@ -0,0 +1,27 @@ + + + + Dynamic Quiz Project + + + + +
+
+

Learning Js Properly: Project #1 - Dynamic Quiz

+
+
+
+ + + + +
+ + + + + + diff --git a/Dynamic Quiz/script.js b/Dynamic Quiz/script.js new file mode 100644 index 0000000..105e3b2 --- /dev/null +++ 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 = $('
', { + id: 'question' + }); + + var header = $('

Question ' + (index + 1) + ':

'); + qElement.append(header); + + var question = $('

').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 = $('