I’m building a site that contains several quizzes. To avoid redundant code, each quiz will have a javascript array to hold the answers - an answer key. I’m wanting to do all of this client-side with JS/JQuery. I need to link each quiz question with it’s answer in it’s corresponding answer key. Here’s a snippet of 2 questions from one of the quizzes. (The .check-answer button is not a submit button because I don’t want to submit anything to the server.)
<li class="group">
<div class="question group">
<p>What note is this?</p>
<img src="../img/Quiz/notesOnTrebleQuiz/C5.gif" alt="3rd space from bottom" />
</div><!-- end .question -->
<div class="choices">
<form data-question-id="1">
<label>
<input name="quizAnswer" id="notesOnTrebleQuiz_Q1A1" type="radio" value="A" />A
</label>
<label>
<input name="quizAnswer" id="notesOnTrebleQuiz_Q1A2" type="radio" value="B" />B
</label>
<label>
<input name="quizAnswer" id="notesOnTrebleQuiz_Q1A3" type="radio" value="C" />C
</label>
<label>
<input name="quizAnswer" id="notesOnTrebleQuiz_Q1A4" type="radio" value="D" />D
</label>
<label>
<input name="quizAnswer" id="notesOnTrebleQuiz_Q1A5" type="radio" value="E" />E
</label>
<label>
<input name="quizAnswer" id="notesOnTrebleQuiz_Q1A6" type="radio" value="F" />F
</label>
<label>
<input name="quizAnswer" id="notesOnTrebleQuiz_Q1A7" type="radio" value="G" />G
</label>
<a class="check-answer">check answer</a>
</form>
</div><!-- end .choices -->
<div class="answer">
<p class="correct">Correct!</p>
<p class="incorrect">Incorrect.</p>
</div><!-- end .answer -->
</li>
<li class="group">
<div class="question group">
<p>What note is this?</p>
<img src="../img/Quiz/notesOnTrebleQuiz/F4.gif" alt="1st space on bottom" />
</div><!-- end .question -->
<div class="choices">
<form data-question-id="2">
<label>
<input name="quizAnswer" type="radio" value="A" />A
</label>
<label>
<input name="quizAnswer" type="radio" value="B" />B
</label>
<label>
<input name="quizAnswer" type="radio" value="C" />C
</label>
<label>
<input name="quizAnswer" type="radio" value="D" />D
</label>
<label>
<input name="quizAnswer" type="radio" value="E" />E
</label>
<label>
<input name="quizAnswer" type="radio" value="F" />F
</label>
<label>
<input name="quizAnswer" type="radio" value="G" />G
</label>
<a class="check-answer">check answer</a>
</form>
</div><!-- end .choices -->
<div class="answer">
<p class="correct">Correct!</p>
<p class="incorrect">Incorrect.</p>
</div><!-- end .answer -->
</li>
And here’s my corresponding JS code:
var notesOnTrebleAnswerKey = {
1: 'C',
2: 'F',
3: 'D',
4: 'D',
5: 'E',
6: 'A',
7: 'G',
8: 'D',
9: 'C',
10: 'C',
11: 'B',
12: 'F',
13: 'G',
14: 'E',
15: 'F',
16: 'A',
17: 'B',
18: 'A',
19: 'G',
20: 'B',
21: 'E',
22: 'G'
}
//when check answer, provides response
$('.check-answer').click(function(){
var getResult = $(this).find('.answer');
var answers = $(this).parent('.choices');
var question = answers.data('question-id');//may need to separate .choices from data-question-id
var answer = answers.find('input:selected').val();
var correct = $('.answer').find('.correct');
var incorrect = $('.answer').find('.incorrect');
//Notes on Treble Quiz
if(notesOnTrebleAnswerKey[question] == answer){
getResult.find('.correct').show();
getResult.find('.incorrect').hide();
/*
correct.show();
incorrect.hide();
*/
} else {
getResult.find('.correct').hide();
getResult.find('.incorrect').show();
/*
correct.hide();
incorrect.show();
*/
}
I can’t figure out why this isn’t working. Can anyone help?