Answer validation and no skipping questions (for Quiz)
I'm building a quiz and there are two functions I can't seem to work into the mostly complete code. I followed several tutorials and forums to put this together, and cant seem to work in what I need. If someone could point me in right direction?
What it does now:
1. Allows questions to be skipped
2. Checks answers after the last question, and displays the question and correct answer at the end.
What I'd like it to do:
1. Cannot proceed to next question without a selection (cannot leave radio empty)
2. Check if correct answer before moving to next question, if incorrect then display questions[j].w
3. Click next again to move to next question
HTML:
- <div id="wrapper">
- <div id="main">
- <h1>Quiz</h1>
- <p>Test your knowledge.</p>
- <button type="button" class="begin" value="begin">begin</button>
- </div>
-
- <div id="questions"></div>
- </div>
JS:
- $(document).ready(function() {
- $(".begin").click(function(){
- $("#main").hide();
- return quiz();
- });
- function startOver() {
- location.reload(true);
- }
- function quiz() {
- var score = [];
- var questions = [{
- q: "1 + 1",
- s: ["1",
- "2",
- "3"],
- a: "2",
- w: "Incorrect",
- correct: 0
- }, {
- q: "2 + 1",
- s: ["1",
- "2",
- "3"],
- a: "3",
- w: "Incorrect",
- correct: 0
- }, {
- q: "3 + 1",
- s: ["1",
- "2",
- "3"],
- a: "4",
- w: "Incorrect",
- correct: 0
- }];
-
- var counter = questions.length;
-
- function renderQuestion(questions) {
- for (var i = 0; i < questions.length; i++) {
- $("#questions").append(
- '<form id="'+i+'">' +
- '<p class="page">Question ' + (i + 1) + ' of ' + questions.length + '</p>' +
- '<hr class="row">' +
- '<h3 class="question">' + questions[i].q + '</h3>' +
- radioButtons(questions[i].s, i) +
- '<hr class="row">' +
- '<span class="nav">' +
- '<button type="button" class="reset" value="reset">start over</button>' +
- '<button type="submit" class="next">next</button>' +
- '</span></form>');
- }
- for (var k = questions.length - 1; k > 0; k--) {
- $('#' + k).hide();
- }
-
- $('.reset').click(startOver);
- }
-
- function radioButtons(ary, qNum) {
- var answers = [];
- for (i = 0; i < ary.length; i++) {
- answers.push(
- '<div class="choices">' +
- '<input type="radio" name="'+qNum+'" value="' + ary[i] + '" id="'+qNum+'">' +
- '<label for="'+qNum+'">' +ary[i]+ '</label>' +
- '</div>');
- }
- return answers.join("");
- }
-
- function sumCorrect(questions) {
- return score.reduce(function (previousValue, currentValue, index, array) {
- return previousValue + currentValue;
- });
- }
- function checkAnswer(answer, qNum, questions) {
- if (answer == questions[qNum].a) {
- questions[qNum].correct = 1;
- score.push(questions[qNum].correct);
-
- } else {
- score.push(questions[qNum].correct);
- }
- }
-
- renderQuestion(questions);
-
- $(".next").click(function (event) {
- event.preventDefault();
- var qNum = $(this).closest("form").attr("id");
-
- var userInput = $('input[name='+qNum+']:radio:checked').val();
- if (counter > 1) {
- checkAnswer(userInput, qNum, questions);
- $("#" + qNum).hide();
- $("#" + qNum).next().show();
- counter--;
- } else if (counter == 1) {
- checkAnswer(userInput, qNum, questions);
- $("#questions").find("form").remove();
- $("#questions").append(
- '<p class="page result"></p>' +
- '<hr class="row">' +
- '<div class="nav nextLast">' +
- '<button type="button" class="reset" value="reset">start over</button>' +
- '</div>');
- $(".result").text('You answered ' + sumCorrect(questions) + ' questions correctly out of 3.');
- for (j = 0; j < score.length; j++) {
- if (score[j] === 0) {
- console.log(questions[j].q, questions[j].a);
- $("#questions").append('<div>' +
- '<h3 class="question">' + questions[j].q + '</h3>' +
- '<p>' + questions[j].a + '</p>' +
- '</div>');
- }
- $('.reset').click(startOver);
- }
- } else {
- return false;
- }
- });
- }
- });