After creating a simple quiz question using jQuery, involving show/hide, addClass, and tracking attempts, I am now considering how to replicate the same code for multiple questions. Would it be best practice to modify all variables in both HTML and jQuery, or is there a more efficient way to handle additional questions?
This is how the first question was structured:
<form class="ra">
<div class="cor">
<input type="radio" name="question1" class="c1" />A. Choice A<span class="hiddencorr">Correct answer</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i1" />B. Choice B<span class="incorr">Your choice</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i2" />C. Choice C<span class="incorr">Your choice</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i3" />D. Choice D<span class="incorr">Your choice</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i4" />E. Choice E<span class="incorr">Your choice</span>
</div>
</form>
<p class="rationale1"><b>Rationale:</b>
<br />
<br /><span class="rattext">Explanation of what was done wrong.</span>
</p>
<button id="radiochk1" class="checkhide">Check your answer</button>
<button id="resetq1" class="reset">Reset</button>
For JS/CSS and functionality, check out the fiddle: http://jsfiddle.net/YSSWL/97/