add a shuffle to hidden div content and cycle thru each one on clcik

Question

First, thank you for any help you can provide.

I am trying to add some randomness to my list of 60+ questions. When you click the question, it will result an answer for that specific question after you click each question. It would be great to cycle thru them, then end on "Thank you."

$(document).ready( function() {

$('.truth2').hide()
$('.truth3').hide()
$('.truth4').hide()
$('.truth5').hide()


$('.youcould2').hide()
$('.youcould3').hide()
$('.youcould4').hide()
$('.youcould5').hide()
$('.youcould6').hide()



$('#replaceLink a').click(function(){
 $(this).hide().siblings().show()
  var w = this.hash.replace('#', '');
$('#result div.truth'+w).show().siblings().hide()
 })
} );

Here is where I'm at: http://jsfiddle.net/thedeej/ssWEQ/9/

Google for the Fisher-Yates shuffle. That ight help you. You would need tokeep questions and answers in step of course. — rossum, Sep 16 '13 at 17:41

score 0 · Answer 1 · edited Feb 19 '14 at 17:14

Here is a solution. It requires a few changes to your HTML, specifically:

Assign all answers the same class (truth)
Assign each answer a unique class or ID: (tr1, tr2, etc)
Assign each question the same class (youcould)
Assign each question a unique class or ID: (yc1, yc2, etc)
Make all divs into siblings, not children

Working jsFiddle example

HTML:

<div id="result">
    <div class="truth tr0"><h2>---</h2></div>
    <div class="truth tr1"><h2>answer to one</h2></div>
    <div class="truth tr2"><h2>answer to two</h2></div>
    <div class="truth tr3"><h2>answer to three</h2></div>
    <div class="truth tr4"><h2>answer to four</h2></div>
    <div class="truth tr5"><h2>answer to five</h2></div>
    <div class="truth tr6"><h2>answer to six</h2></div>
 </div>   

<div id="replaceLink">
    <div class="youcould yc1">
        <a href="#2"><h2>QUESTION ONE</h2></a>
    </div>
    <div class="youcould yc2">
        <a href="#3"><h2>QUESTION TWO</h2></a>
    </div>
    <div class="youcould yc3">
        <a href="#4"><h2>QUESTION THREE</h2></a>
    </div>
    <div class="youcould yc4">
        <a href="#5"><h2>QUESTION FOUR</h2></a>
    </div>
    <div class="youcould yc5">
        <a href="#5"><h2>QUESTION FIVE</h2></a>
    </div>
    <div class="youcould yc6">
        <a href="#5"><h2>QUESTION SIX</h2></a>
    </div>
    <div class="youcould yc7">
        <a href="#6"><h2>THANK YOU</h2></a>
    </div>
</div>

<div id="response"></div>
<input type="button" id="mybutt" value="Start Test" />

Javascript/jQuery:

arrDone = [];
$(document).ready(function () {

    //http://stackoverflow.com/questions/1527803/generating-random-numbers-in-javascript-in-a-specific-range
    function getRandomInt (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function nextQues() {
        //If all six questions asked, quit
        if (arrDone.length == 6) return 7;

        success = 0;
        while (success == 0) {
            nn = getRandomInt(1, 6);
            if (arrDone.indexOf(nn) == -1) {
                success++;
                arrDone.push(nn);
            }
        }
        return nn;
    }

    $('.youcould, .truth').hide();
    $('.tr0').show();

    $('.youcould').click(function() {
        $(this).hide();

        //Get last-entered element from array
        thisA = arrDone[arrDone.length -1];
        $('.tr'+thisA).show();
    });

    $('.truth').click(function() {
        $(this).hide();
        if (arrDone.length == 6){
            $(this).removeClass('truth');
            $('#replaceLink').html('<div><h1>Test is Over.</h1><div>');
        }else{
            nextQ = nextQues();
            $('.yc'+nextQ).show();
        }
    });

    $('#mybutt').click(function () {
        $(this).hide();
        $('.tr0').hide();
        nextQ = nextQues();
        $('.yc'+nextQ).show();
    });

}); //END document.ready

AWESOME!! Much thanks gibberish. I love the way you have simplified it. Does it have to have the "Start Test" button. Could it pull a question instead? — TheDeej, Sep 18 '13 at 21:24
I notice that when you click the question it shows the answer to that question could the next question stay visible? Presentation is key. Take a look at my sample. Again thank you for helping me. — TheDeej, Sep 18 '13 at 21:31

add a shuffle to hidden div content and cycle thru each one on clcik

1 Answers1