Created
May 19, 2017 07:29
-
-
Save lizardking8610/30b8ad3398e27e38e0fb69f0bbac3fff to your computer and use it in GitHub Desktop.
JavaScript: Dynamic Quiz
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Dynamic Quiz Project</title> | |
| <link type='text/css' rel='stylesheet' href='stylesheet.css'/> | |
| <link rel="stylesheet" type="text/css" href="http://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='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> | |
| <script type="text/javascript" src='questions.json'></script> | |
| <script type='text/javascript' src='jsquiz.js'></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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; | |
| } | |
| })(); |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Would be useful for training and test or quizzes where the person would want the results immediately.