└── quiz_page
    ├── jsquiz.js
    ├── stylesheet.css
    └── web1.html


/quiz_page/jsquiz.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 |     var questions = [{
  3 |       question: "What is 2*5?",
  4 |       choices: [2, 5, 10, 15, 20],
  5 |       correctAnswer: 2
  6 |     }, {
  7 |       question: "What is 3*6?",
  8 |       choices: [3, 6, 9, 12, 18],
  9 |       correctAnswer: 4
 10 |     }, {
 11 |       question: "What is 8*9?",
 12 |       choices: [72, 99, 108, 134, 156],
 13 |       correctAnswer: 0
 14 |     }, {
 15 |       question: "What is 1*7?",
 16 |       choices: [4, 5, 6, 7, 8],
 17 |       correctAnswer: 3
 18 |     }, {
 19 |       question: "What is 8*8?",
 20 |       choices: [20, 30, 40, 50, 64],
 21 |       correctAnswer: 4
 22 |     }];
 23 |     
 24 |     var questionCounter = 0; //Tracks question number
 25 |     var selections = []; //Array containing user choices
 26 |     var quiz = $('#quiz'); //Quiz div object
 27 |     
 28 |     // Display initial question
 29 |     displayNext();
 30 |     
 31 |     // Click handler for the 'next' button
 32 |     $('#next').on('click', function (e) {
 33 |       e.preventDefault();
 34 |       
 35 |       // Suspend click listener during fade animation
 36 |       if(quiz.is(':animated')) {        
 37 |         return false;
 38 |       }
 39 |       choose();
 40 |       
 41 |       // If no user selection, progress is stopped
 42 |       if (isNaN(selections[questionCounter])) {
 43 |         alert('Please make a selection!');
 44 |       } else {
 45 |         questionCounter++;
 46 |         displayNext();
 47 |       }
 48 |     });
 49 |     
 50 |     // Click handler for the 'prev' button
 51 |     $('#prev').on('click', function (e) {
 52 |       e.preventDefault();
 53 |       
 54 |       if(quiz.is(':animated')) {
 55 |         return false;
 56 |       }
 57 |       choose();
 58 |       questionCounter--;
 59 |       displayNext();
 60 |     });
 61 |     
 62 |     // Click handler for the 'Start Over' button
 63 |     $('#start').on('click', function (e) {
 64 |       e.preventDefault();
 65 |       
 66 |       if(quiz.is(':animated')) {
 67 |         return false;
 68 |       }
 69 |       questionCounter = 0;
 70 |       selections = [];
 71 |       displayNext();
 72 |       $('#start').hide();
 73 |     });
 74 |     
 75 |     // Animates buttons on hover
 76 |     $('.button').on('mouseenter', function () {
 77 |       $(this).addClass('active');
 78 |     });
 79 |     $('.button').on('mouseleave', function () {
 80 |       $(this).removeClass('active');
 81 |     });
 82 |     
 83 |     // Creates and returns the div that contains the questions and 
 84 |     // the answer selections
 85 |     function createQuestionElement(index) {
 86 |       var qElement = $('<div>', {
 87 |         id: 'question'
 88 |       });
 89 |       
 90 |       var header = $('<h2>Question ' + (index + 1) + ':</h2>');
 91 |       qElement.append(header);
 92 |       
 93 |       var question = $('<p>').append(questions[index].question);
 94 |       qElement.append(question);
 95 |       
 96 |       var radioButtons = createRadios(index);
 97 |       qElement.append(radioButtons);
 98 |       
 99 |       return qElement;
100 |     }
101 |     
102 |     // Creates a list of the answer choices as radio inputs
103 |     function createRadios(index) {
104 |       var radioList = $('<ul>');
105 |       var item;
106 |       var input = '';
107 |       for (var i = 0; i < questions[index].choices.length; i++) {
108 |         item = $('<li>');
109 |         input = '<input type="radio" name="answer" value=' + i + ' />';
110 |         input += questions[index].choices[i];
111 |         item.append(input);
112 |         radioList.append(item);
113 |       }
114 |       return radioList;
115 |     }
116 |     
117 |     // Reads the user selection and pushes the value to an array
118 |     function choose() {
119 |       selections[questionCounter] = +$('input[name="answer"]:checked').val();
120 |     }
121 |     
122 |     // Displays next requested element
123 |     function displayNext() {
124 |       quiz.fadeOut(function() {
125 |         $('#question').remove();
126 |         
127 |         if(questionCounter < questions.length){
128 |           var nextQuestion = createQuestionElement(questionCounter);
129 |           quiz.append(nextQuestion).fadeIn();
130 |           if (!(isNaN(selections[questionCounter]))) {
131 |             $('input[value='+selections[questionCounter]+']').prop('checked', true);
132 |           }
133 |           
134 |           // Controls display of 'prev' button
135 |           if(questionCounter === 1){
136 |             $('#prev').show();
137 |           } else if(questionCounter === 0){
138 |             
139 |             $('#prev').hide();
140 |             $('#next').show();
141 |           }
142 |         }else {
143 |           var scoreElem = displayScore();
144 |           quiz.append(scoreElem).fadeIn();
145 |           $('#next').hide();
146 |           $('#prev').hide();
147 |           $('#start').show();
148 |         }
149 |       });
150 |     }
151 |     
152 |     // Computes score and returns a paragraph element to be displayed
153 |     function displayScore() {
154 |       var score = $('<p>',{id: 'question'});
155 |       
156 |       var numCorrect = 0;
157 |       for (var i = 0; i < selections.length; i++) {
158 |         if (selections[i] === questions[i].correctAnswer) {
159 |           numCorrect++;
160 |         }
161 |       }
162 |       
163 |       score.append('You got ' + numCorrect + ' questions out of ' +
164 |                    questions.length + ' right!!!');
165 |       return score;
166 |     }
167 |   })();


--------------------------------------------------------------------------------
/quiz_page/stylesheet.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Open Sans;}
 3 | h1 {
 4 |     text-align: center;}
 5 | #title {
 6 |     text-decoration: underline;}
 7 | #quiz {
 8 |     text-indent: 10px;
 9 |     display:none;}
10 | .button {
11 |     border:4px solid;
12 |     border-radius:5px;
13 |     width: 40px;
14 |     padding-left:5px;
15 |     padding-right: 5px;
16 |     position: relative;
17 |     float:right;
18 |     background-color: #DCDCDC;
19 |     color: black;
20 |     margin: 0 2px 0 2px;
21 | }
22 | .button.active {
23 |     background-color: #F8F8FF;
24 |     color: #525252;}
25 | button {
26 |     position: relative;
27 |     float:right;}
28 | .button a {
29 |     text-decoration: none;
30 |     color: black;}
31 | #container {
32 |     width:50%;
33 |     margin:auto;
34 |     padding: 0 25px 40px 10px;
35 |     background-color: #1E90FF;
36 |     border:4px solid #B0E0E6;
37 |     border-radius:5px;
38 |     color: #FFFFFF;
39 |     font-weight: bold;
40 |     box-shadow: 5px 5px 5px #888;
41 | }
42 |     ul {
43 |     list-style-type: none;
44 |     padding: 0;
45 |     margin: 0;}
46 | #prev {
47 |     display:none;}
48 | #start {
49 |     display:none;
50 |     width: 90px;}


--------------------------------------------------------------------------------
/quiz_page/web1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html><head>
 3 |     <title>Dynamic Quiz Project</title>
 4 |     <link type='text/css' rel='stylesheet' href='stylesheet.css'/>
 5 |     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open Sans"/>
 6 |   </head>
 7 |   <body><div id='container'>
 8 |       <div id='title'>
 9 |         <h1>Dynamic Quiz</h1>
10 |       </div><br/>
11 |         <div id='quiz'></div>
12 |         <div class='button' id='next'><a href='#'>Next</a></div>
13 |         <div class='button' id='prev'><a href='#'>Prev</a></div>
14 |         <div class='button' id='start'> <a href='#'>Start Over</a></div>
15 |       </div>
16 |     <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
17 |     <script type="text/javascript" src='questions.json'></script>
18 |     <script type='text/javascript' src='jsquiz.js'></script>
19 |   </body>
20 | </html>


--------------------------------------------------------------------------------