{{extends 'pre_survey/BasePage.html'}}
{{ block title }}Attitudes{{ endblock }}


{{ block content }}

<style type="text/css">
    div.randomContent { display:none; }
</style>

<script type="text/javascript">
    
    function randOrd(){ return (Math.round(Math.random())-0.5); }
    
    function randomizeIt() {
        var nShow = 8;
        // sets up an array of length nShow
        var tarr = new Array(nShow);
        // fills array from 1 to 8
        for (var i=0; i<tarr.length; i++) { tarr[i] = i; }
        
        tarr.sort( randOrd );				//  alert(tarr.join('n'));  // for testing
        for (var i=0; i<8; i++) {
            var divlocn = 'rdiv'+tarr[i]; 
   
            document.getElementById(divlocn).style.display = 'block';
        }
    }
</script>


    
    <div class="container">
        <div class="panel info">
            <p>
            Please choose to which extent you agree with the following statements:
            </p>
    </div>


    <div class="container">
        <div class="block block-radius block-primary">
            <div class="block-content">
                <p>
                    People who insist on a yes or no answer don't know how complicated things are.
                </p>

                <div><a style="display: inline-block">{% formfield player.ambiguity_1 label="" %}</a></div>
            </div>
        </div>
    </div>



    <div class="container">
        <div class="block block-radius block-primary">
            <div class="block-content">
                <p>
                    Many of our most important decisions are based on insufficient information.
                </p>

                <div><a style="display: inline-block">{% formfield player.ambiguity_2 label="" %}</a></div>
            </div>
        </div>
    </div>



    <div class="container">
        <div class="block block-radius block-primary">
            <div class="block-content">
                <p>
                    An expert who is unable to give a clear answer does not know much about the problem.
                </p>

                <div><a style="display: inline-block">{% formfield player.ambiguity_3 label="" %}</a></div>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="block block-radius block-primary">
            <div class="block-content">
                <p>
                    Teachers who assign vague tasks give students a chance to show initiative and originality.
                </p>

                <div><a style="display: inline-block">{% formfield player.ambiguity_4 label="" %}</a></div>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="block block-radius block-primary">
            <div class="block-content">
                <p>
                    Rules and laws should only be followed when they maximize happiness.
                </p>

                <div><a style="display: inline-block">{% formfield player.consequentialist_scale_1 label="" %}</a></div>
            </div>
        </div>
    </div>



    <div class="container">
        <div class="block block-radius block-primary">
            <div class="block-content">
                <p>
                    When deciding what action to take, the only relevant factor to consider would be the outcome of the action.
                </p>
                <div><a style="display: inline-block">{% formfield player.consequentialist_scale_2 label="" %}</a></div>
            </div>
        </div>
    </div>



    <div class="container">
        <div class="block block-radius block-primary">
            <div class="block-content">
                <p>
                    Some rules should never be broken.
                </p>

                <div><a style="display: inline-block">{% formfield player.consequentialist_scale_3 label="" %}</a></div>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="block block-radius block-primary">
            <div class="block-content">
                <p>
                    It is never morally justified to cause someone harm.
                </p>

                <div><a style="display: inline-block">{% formfield player.consequentialist_scale_4 label="" %}</a></div>
            </div>
        </div>
    </div>
</div>
</div>

    <div class="container">


        <div class="center">
            <button name="Confirm" value="True" class="btn btn-primary btn-large">Next</button>
        </div>
    </div>


    <!--

    <body onLoad="randomizeIt()">
        <div id='rdiv0' class="randomContent">Random 1</div>
        <div id='rdiv1' class="randomContent">Random 2</div>
        <div id='rdiv2' class="randomContent">Random 3</div>
        <div id='rdiv3' class="randomContent">Random 4</div>
        <div id='rdiv4' class="randomContent">Random 5</div>
        <div id='rdiv5' class="randomContent">Random 6</div>
        <div id='rdiv4' class="randomContent">Random 7</div>
        <div id='rdiv5' class="randomContent">Random 8</div>
    </body>
    


On randomizing order of divs:

--------------
Source:
https://www.quora.com/How-do-you-randomize-the-position-of-divs-JavaScript-arrays-sorting-random-and-development


Well its quite simple really -

CSS:

Position your DIVs within a parent DIV with display: flex

Set each of the children display: none

JS:

    select the children of the parent DIV.
    create an array of references to the selected divs
    Use shuffleArray to randomize the order of the array elements
    Iterate the array of references and use the array order to position the child divs -

    document.getElementByID(arr).style.order = array_element_number
    document.getElementByID(arr).style.display = ‘block’

/* Randomize array in-place using Durstenfeld shuffle algorithm */
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
    



--------------
Source:
https://teamtreehouse.com/community/change-order-of-divs-every-reload


--------------
Source:
https://stackoverflow.com/questions/52728473/show-an-html-div-at-random

    
<--    


{{ endblock }}