I am creating a very simple quiz application with jQuery. How it works is you have a question and three answers. Clicking on the wrong answer makes the clicked answer’s opacity fade to 60%. Clicking on the correct answer should make all the wrong answers fade out completely leaving only the correct answer remaining.
The page has 3 quizzes selectable by a navigation. So I am sorting through tests and questions using .index() to target the specific question at hand. Which works as other elements of the quiz are working fine.
The only issue I am having is getting the other answers to fade out on selecting the correct answer. Right now, only the first question is functioning this way; all other questions remain at 100% opacity. I’ve been staring at it all night trying to get it to go and could use an extra set of eyes on this.
CODE :
$('#test .test li ol li').click(function()
{
if($(this).attr('class') == 'correct')
{
var testNum = $(this).closest('.test').index('.test');
var qustNum = $(this).index('.correct');
var corAns = $(this);
var theList = $('.test:eq(' + testNum + ') li:eq(' + qustNum + ') ol li');
//find other questions
theList.not('.correct').animate({ opacity : 0 }, 1000);
getAnswer(testNum, qustNum, corAns);
}
else
{
$(this).animate({ opacity : 0.6 }, 500);
}
});
function getAnswer(testNum, qustNum, corAns)
{
console.log(testNum + ' : ' + qustNum + ' : ' + corAns.text());
//get xml file with answers
$.ajax({
type: "GET",
url: "answers.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Answers').each(function(){
//find the answer in the xml
var answer = $(this).find('test:eq(' + testNum + ') answer:eq(' + qustNum + ')').text();
console.log(answer);
//place answer inside correct li
corAns.html(answer);
});
}
});
//fade in next button
$('#test span').css({ 'display' : 'block' }).delay(2000).animate({ opacity : 1 }, 1000);
$('#test span').click(function()
{
$('.test:eq(' + testNum + ')').animate({ top : '-=286px' }, 500);
});
}
HTML :
<section class="content" id="test">
<h1 style="opacity:0;">test</h1>
<h2 style="opacity:0;">How Much Do You Know?<span>(choose a test)</span></h2>
<ul class="nav">
<li>
<img src="_images/_test/test1.jpg" />
</li>
<li>
<img src="_images/_test/test2.jpg" />
</li>
<li>
<img src="_images/_test/test3.jpg" />
</li>
</ul>
<ol class="test">
<li>
Which blood cells carry oxygen throughout your body?
<ol>
<li>White Blood Cells</li>
<li class="correct">Red Blood Cells</li>
<li>Oxygen Cells</li>
</ol>
</li>
<li>
A blood test procedure can be made easier if you…
<ol>
<li class="correct">imagine you are in a comfortable place during the test.</li>
<li>wear something red.</li>
<li>don't sleep for a week before the test.</li>
</ol>
</li>
<li>
<p>Why do you need to have blood tests?</p>
<ol>
<li>To make sure you have blood</li>
<li>Because it's easier than a math test</li>
<li class="correct">So the doctor can check your health</li>
</ol>
</li>
<li>
<p>How often do you need to have a blood test?</p>
<ol>
<li>Once a year</li>
<li>Twice a month</li>
<li class="correct">It depends on your health</li>
</ol>
</li>
<li>
<p>How long does it take for your body to replace the blood taken from a blood test?</p>
<ol>
<li>One year</li>
<li class="correct">One day</li>
<li>One hour</li>
</ol>
</li>
</ol>
<ol class="test">
<li>
<p>How much blood is drawn in a typical blood test?</p>
<ol>
<li>About half a cup</li>
<li class="correct">About one teaspoon</li>
<li>About 1/2 gallon</li>
</ol>
</li>
<li>
<p>On average, about how much blood does a person have in their body?</p>
<ol>
<li class="correct">A little more then one gallon</li>
<li>1/2 gallon</li>
<li>Four gallons</li>
</ol>
</li>
<li>
<p>Which blood cells help your body fight infection?</p>
<ol>
<li>Army cells</li>
<li class="correct">White blood cells</li>
<li>Red blood cells</li>
</ol>
</li>
<li>
<p>Which cells help you stop bleeding if get a cut?</p>
<ol>
<li class="correct">Platelets</li>
<li>Red blood cells</li>
<li>Plug-up cells</li>
</ol>
</li>
<li>
<p>The area on your skin where blood is drawn must be cleaned because…</p>
<ol>
<li>It's always better to look clean</li>
<li class="correct">It is important that the blood sample is not infected</li>
<li>The test won't hurt as much</li>
</ol>
</li>
</ol>
<ol class="test">
<li>
<p>If you have anemia it means your blood has…</p>
<ol>
<li>too many red blood cells.</li>
<li class="correct">too few red blood cells.</li>
<li>too many white blood cells.</li>
</ol>
</li>
<li>
<p>About how many blood chemistry tests are preformed in the United States each year?</p>
<ol>
<li>100,000</li>
<li>3 million</li>
<li class="correct">6 billion</li>
</ol>
</li>
<li>
<p>Where are blood cells made?</p>
<ol>
<li>Your heart</li>
<li class="correct">Your bone marrow</li>
<li>California</li>
</ol>
</li>
<li>
<p>A Complete Blood Count (CBC) is a test in which…</p>
<ol>
<li class="correct">all of the different cells in your blood are counted.</li>
<li>a machine looks at the chemicals in your blood to check for disease.</li>
<li>the amount of blood in your body is counted.</li>
</ol>
</li>
<li>
<p>Testing for blood types is important in order to…</p>
<ol>
<li class="correct">receive the right blood type if you ever need blood.</li>
<li>be eligible for a drivers license.</li>
<li>learn about your personality.</li>
</ol>
</li>
</ol>
<span>Next Question --></span>
</section>
Additional:
All console.log’s show the correct index is being targeted by the variables on each click.
The test html is built of nested ordered lists.
Thanks for any help on this. I’ll bet its something simple I’ve overlooked.
Replace:
With: