Random Image Swap

by Gordon Watson

HTML

<div id="content">
    <div class="content4Column gap">
        <div class="card-container">
            <div class="card click" data-direction="left">
                <div class="front">
                    <img src="http://www.new.chemistry-teaching-resources.com/Resources/CfENewHigher/FlashCards/Intermolecular/Q1.png" width="100%" height="100%" alt="" />
                </div>
                <div class="back">
                    <img src="http://www.new.chemistry-teaching-resources.com/Resources/CfENewHigher/FlashCards/Intermolecular/A1.png" width="100%" height="100%" alt="" />
                </div>
            </div>
        </div>
    </div>

JavaScript

var QAPairs = [];
var QATotal = 112; // total numbers of QA pairs
var QA = QATotal; //number of QA pairs you want. Set to QATotal to include all QA pairs
    while (QAPairs.length != QA) {
        var rand = Math.floor(Math.random() * QATotal);
        if (QAPairs.indexOf(rand) == -1) {
            QAPairs.push(rand);
            //  If you want to show them all at a time
            for (i = 0; i < QAPairs.length; i++){document.getElementsByClassName("card click")[i].innerHTML = document.getElementsByClassName("card click")[i].innerHTML + '<div class="front">\
            <img src="http://www.new.chemistry-teaching-resources.com/Resources/CfENewHigher/FlashCards/Intermolecular/Q' + QAPairs[i] + '.png" width="100%" height="100%" alt="" />\
        </div>\
        <div class="back">\
            <img src="http://www.new.chemistry-teaching-resources.com/Resources/CfENewHigher/FlashCards/Intermolecular/A' + QAPairs[i] + '.png" width="100%" height="100%" alt="" />\
</div>';}
        }
    }