Jquery Mobile Randomly Inputs

Question

I need to present inputs a ramdomly fashion using JQM.

I think I should use divs to separate each question and then call a JavaScrip func to sort, but no clue how to get in.

Q1, Q3, Q2 ... Q1, Q2, Q3 ... Q3, Q2, Q1 ... ETC

Like this:

Q1. What is your age? (Number)
Q2. What color do you prefer? (Single choice)
Q2. Tell us about the food...(Group)

Here is the Mark up:

<div>
    <h4>Q1. What is your age?</h4>
</div>

    <input name='V14' id='V14' data-default-value='0' type='number' min='0' max='100' size='12' step='0.1' class=''/>

<div>
    <h4>Q2. What color do you prefer</h4>
</div>

<fieldset data-role='controlgroup' id='V15'>

<input id ='V15_1' type='radio' name='V15' value='1'><label for='V15_1'> Blue</label>
<input id ='V15_2' type='radio' name='V15' value='2'><label for='V15_2'> Red</label>
<input id ='V15_3' type='radio' name='V15' value='3'><label for='V15_3'> Yellow</label>
</fieldset>


<div>
    <h4>Q3. Tell us about the food</h4>
</div>

<div data-role='collapsible-set'>
<div data-role='collapsible' data-collapsed='false' data-theme='b' data-content-theme='d'>
<h3>Flavour</h3>

    <fieldset data-role='controlgroup' id='V16'>
    <input id ='V16_1' type='radio' name='V16' value='1'><label for='V16_1'> Good</label>
    <input id ='V16_2' type='radio' name='V16' value='2'><label for='V16_2'> Fair</label>
    </fieldset>
</div>
</div>

<div data-role='collapsible-set'>
<div data-role='collapsible' data-collapsed='false' data-theme='b' data-content-theme='d'>
<h3>Taste</h3>

    <fieldset data-role='controlgroup' id='V17'>
    <input id ='V17_1' type='radio' name='V17' value='1'><label for='V17_1'> Good</label>
    <input id ='V17_2' type='radio' name='V17' value='2'><label for='V17_2'> Fair</label>
    </fieldset>
</div>
</div>

<div data-role='collapsible-set'>
<div data-role='collapsible' data-collapsed='false' data-theme='b' data-content-theme='d'>
<h3>Temperature</h3>
    <fieldset data-role='controlgroup' id='V18'>
    <input id ='V18_1' type='radio' name='V18' value='1'><label for='V18_1'> Good</label>
    <input id ='V18_2' type='radio' name='V18' value='2'><label for='V18_2'> Fair</label>
    </fieldset>
</div>
</div>

score 2 · Accepted Answer · edited May 23 '17 at 12:18

Basically just wrap your questions into separate divs and proceed as follows:

<div id="wrapper">
    <div class="question">
    question1
    </div>

    <div class="question">
    question2
    </div>

    <div class="question">
    question3
    </div>
</div>

<script type="text/javascript">
    function shuffle(array) {
        var counter = array.length, temp, index;

        // While there are elements in the array
        while (--counter > -1) {
            // Pick a random index
            index = (Math.random() * counter) | 0;

            // And swap the last element with it
            temp = array[counter];
            array[counter] = array[index];
            array[index] = temp;
        }

        return array;
    }

    var shuffled = shuffle($('.question'));
    $('#wrapper').html('');

    for (var a = 0; a < shuffled.length;a++) {
        $('#wrapper').append(shuffled[a]);
    }
</script>

See demo fiddle

Shuffle function kindly borrowed from How can i shuffle an array in JavaScript?.

Hope it helps.

Jquery Mobile Randomly Inputs

1 Answers1