qualtrics.html

<script>
    /* *************************************************************************
        BEGIN JAVASCRIPT
        
        Copy and paste the code below through the END JAVASCRIPT comment into
        the javascript editor for the question.
    ************************************************************************* */ 
    
    /* *********************************************************************
       Update settings for game here.                                      
    ********************************************************************* */
    var controller1Max = 15; // how many times should P1 be Controller?
    var controller2Max = 15; // how many times should P2 be controller?
    var roundMax = 30;       // how many rounds in game?
    var roundValue = 100;    /* how many tickets is each round worth?
                                NOTE: If you change this value, you must
                                      also change the max amount in the 
                                      giveNumber slider below (simply
                                      search for "giveNumber"). */
    var qualtrics = true;    // set to 'true' to send data to Qualtrics
    var blockTrials = true;  /* are Controller assignments blocked (true)
                                or fully randomized (false) */
    var stinMin = .0;        // min prop tickets returned by stingy player
    var stinMax = .1;        // max prop tickets returned by stingy player
                                // stingy: association + P1 Controller
    var geneMin = .6;        // min prop tickets returned by generous player
    var geneMax = .7;        // max prop tickets returned by generous player
                                // generous: association + P2 Controller
    var fairMin = .45;       // min prop tickets returned by fair player
    var fairMax = .55;       // max prop tickets returned by fair player
                                // fair: no association OR no Controller

    /* *********************************************************************
    * Update this file list with paths to your *locally hosted* files (for *
    * example, files hosted on *your* Qualtrics account or your server).   *
    ********************************************************************* */
    // root URL for image files in Qualtrics file system
    var root = "https://s.qualtrics.com/ControlPanel/File.php?F=F_";

    // avatar file names are root + ids, stored in array
    var avatarFiles = new Array();
    avatarFiles.push(root+"4VMOAvQA1AESFJX"); // unique file ids
    avatarFiles.push(root+"a8E4fq4HMIw3wRn"); // upload images to your account
    avatarFiles.push(root+"41qtXpnDxiLoTnT"); // and change the ids to match
    avatarFiles.push(root+"57M3YRh0kfWpdpr"); // your copies
    avatarFiles.push(root+"3sWu55iUZaIVoJn");
    avatarFiles.push(root+"e3su4OeukxIY9CZ");
    avatarFiles.push(root+"0oiJckoSOfpKTnD");
    avatarFiles.push(root+"9KuZG4ekZd4UWGx");
    avatarFiles.push(root+"eX8CjocdADHCYdv");
    avatarFiles.push(root+"9RGuX0mrqkvMHYN");
    avatarFiles.push(root+"3BCvo7dbIcMxLeZ");
    avatarFiles.push(root+"0jOCzPpysN3F02h");
    avatarFiles.push(root+"cHZpTL2OKihmxKd");
    avatarFiles.push(root+"5osYMdT6CxqEGc5");
    avatarFiles.push(root+"dnaeU4f35tPXfaR");
    avatarFiles.push(root+"b2Z4JXCknJPFBrL");
    avatarFiles.push(root+"b2urm5wlLyXBPcp");
    avatarFiles.push(root+"8kLN8v8UlC6NoQ5");
    avatarFiles.push(root+"5vZBKB7NkJ1mjs1");
    avatarFiles.push(root+"1ZddqNgJpNe5afP");
    avatarFiles.push(root+"9zC1P1OSQ05U3fn");
    avatarFiles.push(root+"8IbWG9VRYKB3Dbn");
    avatarFiles.push(root+"5orljVA2e8OIa7X");
    avatarFiles.push(root+"5swzD2G4puy2fDn");
    avatarFiles.push(root+"9vu3Mfg7NUSyaJT");
    avatarFiles.push(root+"3IBZ3muYDPZqDKR");
    avatarFiles.push(root+"2nLEiQXvtriNBMF");
    avatarFiles.push(root+"0PzlS9rV8wBfWS1");
    avatarFiles.push(root+"5guGfZ9AsYZZhQh");
    avatarFiles.push(root+"1HN5ae178prwa8J");

    // other image URLs are root + id, stored as strings
    var waitingBarFile = root + "cuLNvJBnRzXU2RD";
    var giveButtonFile = root + "bCMaxwrks4uUKcl";
    var punishButtonFile = root + "428JoN2ysMi54lT";
    var noPunishButtonFile = root + "bDaZOz1sgiQS101";
    var endRoundFile = root + "5iJjE6rhiUxEqpf";
    var beginGameFile = root + "3mbxmoTIIZ5xY7b";
    var playButtonFile = root + "2nH6wQejyqHW1E1";
        
    /* *********************************************************************
    * Begin game code.                                                     *
    ********************************************************************* */

    // *** Initialize variables ***
    var score = 0; // how many tickets has the player won so far?
    var punish = 0; // was a punishment issued this round? 0 = no; 1 = yes
    var round = 1; // what round is it?
    var gives = []; // array of amount given each round
    var returned = []; // array of amount returned by Player 2 each round
    var punishes = []; // array of whether punishments were given or not
    var trainingCondition = Math.round(Math.random() ); // set training cond
    var index = 0;
    var controllerArray = new Array; // array of assignments to Controller
    var controller; // who is controller this round? 

    // set up the game only when everything is loaded
    Qualtrics.SurveyEngine.addOnload(function(){		
        var roundSum = controller1Max + controller2Max; //sum Controller rds
        var avatarId;
        var linkId;

        console.log("ready!");
        console.log("Number of rounds: " + roundMax);
        $j("#rValueIntro").text(roundValue);
        $j("#gameboard").show();
        $j("#waitForGame").hide();
        $j("fieldset > .QuestionBody").hide();
        $j('#NextButton').hide();
        $j("#p1ControllerRounds").text(controller1Max);
        $j("#p2ControllerRounds").text(controller2Max);

        // show the no controller instructions if needed
        if (roundSum >= roundMax) {
            $j("#noControllerExplanation").hide();
        }

        // if there are too many controller rounds, give warning
        if (roundSum > roundMax) {
            alert("The number of rounds (" + roundMax + ") is less than the number needed for Player 1 to be Controller " + controller1Max + " times AND Player 2 to be Controller " + controller2Max + " times. Please fix this error in the game settings before running the game.");
        }

        // show blocking instructions if needed
        if (blockTrials == false) {
            $j("#blockingExplanation").hide();
        }
       
        // load the avatar images and links
        for (var i = 0; i < avatarFiles.length; i++) {
            avatarId = "#avatar" + i;
            linkId = "#link" + i;
            $j(avatarId).attr("src", avatarFiles[i])
            $j(linkId).attr("href", "javascript:pickAvatar(" + i +")");
        }

        // load the other images
        $j("#giveButton").attr("src", giveButtonFile);
        $j("#waitingForPlayer2").attr("src", waitingBarFile);
        $j("#punishButton").attr("src", punishButtonFile);
        $j("#noPunishButton").attr("src", noPunishButtonFile);
        $j("#endRound").attr("src", endRoundFile);
        $j("#beginGame").attr("src", beginGameFile);
        $j("#matchLoadBar").attr("src", waitingBarFile);
        $j("#playButton").attr("src", playButtonFile);

        // Save the results to Qualtrics   
        this.questionclick = function(event,element){
            if(element.type == 'radio' & qualtrics == true) {
                for (var i = 0; i < roundMax; i++) {
                    var var1 = 'controller'+(i+1);
                    var var2 = 'gave'+(i+1);
                    var var3 = 'returned'+(i+1);
                    var var4 = 'punish'+(i+1);
                    Qualtrics.SurveyEngine.setEmbeddedData(var1,
                        controllerArray[i]);
                    Qualtrics.SurveyEngine.setEmbeddedData(var2, gives[i]);
                    Qualtrics.SurveyEngine.setEmbeddedData(var3, returned[i]);
                    Qualtrics.SurveyEngine.setEmbeddedData(var4, punishes[i]);
                }
                Qualtrics.SurveyEngine.setEmbeddedData('score', score);
                Qualtrics.SurveyEngine.setEmbeddedData('training',
                    trainingCondition);
                this.clickNextButton();
            }
        }
    });


    // shuffle an array
    function shuffleArray(myArray) {
        for (var i = myArray.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = myArray[i];
            myArray[i] = myArray[j];
            myArray[j] = temp;
        }
        return myArray;
    }

    // fill array of controller assignments
    function assignController() {
        // how many no Controller rounds?
        var n0 = roundMax - controller1Max - controller2Max;
        // randomize order of Controller assignment blocks
        var blockArray = shuffleArray([0, 1, 2]); 
        var counts = [n0, controller1Max, controller2Max];

        console.log(blockArray);

        // build the array in blocks
        for (var i = 0; i < blockArray.length; i++) {
            var j = 0;
            while (j < counts[blockArray[i]]) {
                controllerArray.push(blockArray[i]);
                j++;
            }
        }

        // if blocking in NOT desired, shuffle all assignments
        if (blockTrials == false) {
            controllerArray = shuffleArray(controllerArray);
        }
    }

    // When player starts the game, show them the avatar selection screen
    function showAvatars() {
        console.log("show avatars");
        $j("#instructions").hide();
        $j("#selectAvatar").show();
    }
        
    // show player's avatar & initialize game
    function pickAvatar(whichAvatar) {
        var player1uri = avatarFiles[whichAvatar];
        $j('#player1image').attr('src', player1uri);
        assignController();
        startRound();
    }

    // Start a round
    function startRound(){
        /* if game is over, show the continue button and let the player
        leave otherwise, start a new round of the game */
        $j("#controllerOption").hide();
        $j("#returnedTickets").hide();
        $j("#punishmentSuccess").hide();
        $j("#showEndButton").hide();
        $j("#noSharing").hide();
        if (round > roundMax){
            console.log("round > roundMax");
            $j("#topBox").hide();
            $j("#finalScore").text(score);
            $j('#gameOver').show();
            $j("fieldset > .QuestionBody").show();
            $j("#Buttons").hide();
        } else {
            // reset the slider to 0
            document.getElementById("giveNumber").value = 0;
            $j("#currentGiveValue").text("0");
        
            /* Generate a random number from 2500 and 3500 that defines how
            many ms player waits before P2 supposedly joins the game */
            var playerWaitTime = Math.floor(Math.random() * 1000) + 2500;
            console.log(playerWaitTime);
                
            // randomly select an avatar for Player 2
            var player2 = Math.floor(Math.random()*30);
            var player2uri = avatarFiles[player2];                
            var sentTickets = 0; // how many tickets has P1 sent this round?
            var returnedTickets = 0; // how many tickets returned to P1?
            
            // who is controller this round?
            controller = controllerArray[round - 1];
            console.log("Round: " + round + "; Controller: " + controller);
                
            /* When the round begins, hide avatar selection and punishment
            results, and show the player that they are assigned to P1 */
            $j("#waitForReturn").hide();
            $j("#topBox").show();
            $j("#selectAvatar").hide();
            $j("#player2spared").hide();
            $j("#player2punished").hide();
            $j("#avatarBox").hide();
            $j("#matchingPlayers").show();
            $j("#loadingMatch").show();
            $j("#matchRoundNumber").text(round);
            $j("#roundNumber").text(round);
            $j("#roundBox").show();
            $j("#scoreBox").show();
            $j("#playerBox").show();
                    
            // tell the player who is controller
            if (controller == 1){
                $j("#noController").hide();
                $j("#youAreController").show();
                $j("#player2isController").hide();
            } else if (controller == 2){
                $j("#noController").hide();
                $j("#youAreController").hide();
                $j("#player2isController").show();
            } else {
                $j("#noController").show();
                $j("#youAreController").hide();
                $j("#player2isController").hide();
            }
        
            // after a few seconds, the round begins
            setTimeout(function(){
                    $j('#player2image').attr('src', player2uri);
                    $j('#player2image').show();
                    $j("#avatarBox").show();
                    $j('#loadingMatch').hide();
                    $j('#playRound').show();
            }, playerWaitTime);   
        }
    }

    // show the player the give interface
    function giveInterface() {
        $j('#matchingPlayers').hide();
        $j('#playRound').hide();
        score = score + roundValue;
        $j("#rValueGiven").text(roundValue);
        $j("#scoreValue").text(score);
        $j("#giveInterface").show();
    }
        
    // display to the player how many tickets they are giving away
    function outputUpdate(give) {
        document.querySelector('#currentGiveValue').value = give;
    }
        
    /* wait for P2 to return tickets, give the controller the option to 
    punish, and then end the round */
    function returnTickets(){
        // initialize variables
        var ticketsGiven = document.getElementById("giveNumber").value;
        var p1amountKept = roundValue - ticketsGiven; // # of tickets P1 keeps?
        var tripleTickets = ticketsGiven * 3; // # of tickets given to P2?
        var returnPct; // what proportion of tickets does P2 return?
        var returnAmount; // what number of tickets does P2 return?
        var p2amountKept; // what number of tickets does P2 keep?
        var punishmentAmount = 0; // how many tickets is punishment worth?
        var playerWaitTime; // how long to wait for P2 to move
        var p2punish = false; // does P2 punish?
        // how many tickets does P2 want to not punish?
        var p2punishThreshold = Math.random() * (.15 * roundValue);

        gives[round - 1] = ticketsGiven;
        console.log("Round: " + round + "; Gives: " +gives[round - 1]);        
        
        // if P1 gave 0 tickets & P2 is not Controller, skip P2's turn    
        if (ticketsGiven == 0 & controller != 2){
            $j("#giveInterface").hide();
            $j("#noSharing").show();
            returned[round - 1] = ticketsGiven;
            console.log("Round: " + round + "; Results, returned: " + 
                returned[round - 1]);
            endRound(0);
        } else { // P2's turn
            // determine how many tickets to return/keep
            if (trainingCondition == 0 || controller == 0) {
                returnPct = Math.random() * (fairMax - fairMin) + fairMin; 
            } else if (controller == 1) {
                returnPct = Math.random() * (stinMax - stinMin) + stinMin;
            } else {
                returnPct = Math.random() * (geneMax - geneMin) + geneMin; 
            }
            returnAmount = Math.floor(tripleTickets * returnPct);
            returned[round - 1] = returnAmount; // store in array
            console.log("Round: " + round + "; Results, returns: " + 
                returned[round - 1]);
            console.log(returnAmount);
            p2amountKept = tripleTickets - returnAmount;
            
            // determine value of punishment
            if (controller == 1) {
                punishmentAmount = Math.round(p2amountKept / 3);
            } else if (controller == 2) {
                punishmentAmount = Math.round(p1amountKept / 3);
            }
            
            /* Generate a random number from 2500 to 5000 that defines how
            many ms player waits before P2 returns tickets */
            playerWaitTime = Math.floor(Math.random() * 2500) + 2500;
            console.log(playerWaitTime);
                
            // update score to reflect tickets given
            score = score - ticketsGiven;
            $j("#scoreValue").text(score);
                
            // tell P1 to wait for return
            $j("#giveInterface").hide();
            $j("#gaveNumber").text(ticketsGiven);
            $j("#receiveNumber").text(tripleTickets);
            $j("#returnedTickets").hide();
            $j("#waitForReturn").show();
            if (controller == 2) {
                $j("#p2decidesToPunish").show();
            };
            $j("#waitForMove").show();
                    
            // after 2.5-5s, P2 sends tickets back & punishes if Controller
            setTimeout(function(){
                if (controller == 2) {
                    if (ticketsGiven < p2punishThreshold) {
                        score = score - punishmentAmount;
                        punish = 1;
                        $j("#player2punished").show();
                        $j("#player2spared").hide();
                    } else {
                        $j("#player2punished").hide();
                        $j("#player2spared").show();
                    }
                }
                score = score + returnAmount;
                $j("#scoreValue").text(score);
                $j("#waitForMove").hide();
                $j("#p2decidesToPunish").hide();
                $j("#returnedNumber").text(returnAmount);
                $j("#p1punishmentNumber").text(punishmentAmount);
                $j("#p2punishmentNumber").text(punishmentAmount);
                $j("#returnedTickets").show();
                $j("#scoreValue").text(score);
                $j("#showEndButton").hide();
                
                /* if the player is the controller, give option to punish;
                otherwise, end the round */
                if (controller == 1){
                    $j("punishmentNumber").text(punishmentAmount);
                    $j("lostNumber").text(punishmentAmount);
                    $j("#controllerOption").show();
                } else {
                    endRound(0);
                }
            }, playerWaitTime);
        }
    }
        
    // display the final results of the round and allow the player to end it
    function endRound(punished){            
        punishes[round - 1] = punished;
        console.log("Round: " + round + "; Results, punishes: " + 
            punishes[round - 1]);
        $j("#controllerOption").hide();
        round = round + 1;
        if (punished == 1){
            $j("#controllerOption").hide();
            $j("#showEndButton").show();
            $j("#punishmentSuccess").show();
        } else {
            $j("#showEndButton").show();
        }
    }
         
    /* *************************************************************************
        END JAVASCRIPT
        
        Copy and paste the code above through the BEGIN JAVASCRIPT comment into
        the javascript editor for the question.
    ************************************************************************* */
</script>


<!-- ***************************************************************************
    BEGIN QUESTION TEXT
        
    Copy and paste the code below through the END QUESTION TEXT comment into
    the html editor for the question.
**************************************************************************** -->     
    <div id="waitForGame">Please wait for the game to load.</div>

    <div id="gameboard">
        <div id="topBox" style="display:none; width: 465px; margin-left: auto;
        margin-right: auto;">
            <div id="playerBox" class="infoBox" style="display:none; width:95px;
            background-color: #253494; border-style: solid; border-width: 5px;
            border-color: #081d58; padding: 5px; margin: 10px;
            font-family: Arial, Helvetica, sans-serif; color: #ffffff;
            float: left; text-align: center;">
                <div class="boxTitle">You</div>

                <div class="boxContents" style="width:65px; height:60px;
                background-color: #ffffff; padding: 5px; margin-left: auto;
                margin-right: auto; margin-top: 5px;
                font-family: Arial, Helvetica, sans-serif; color: #081d58;
                text-align: center; font-size: xx-large;">
                    <img id="player1image" class="playerImage"
                    style="width:50px; height:50px;">
                </div>
            </div>

            <div id="roundBox" class="infoBox" style="display:none; width:95px;
            background-color: #253494; border-style: solid; border-width: 5px;
            border-color: #081d58; padding: 5px; margin: 10px;
            font-family: Arial, Helvetica, sans-serif; color: #ffffff;
            float: left; text-align: center;">
                <div class="boxTitle">Round</div>

                <div class="boxContents" style="width:65px; height:60px;
                background-color: #ffffff; padding: 5px; margin-left: auto;
                margin-right: auto; margin-top: 5px;
                font-family: Arial, Helvetica, sans-serif; color: #081d58;
                text-align: center; font-size: xx-large;">
                    <div class="textContents" id="roundNumber"
                    style="margin-top: 11px;"></div>
                </div>
            </div>

            <div id="scoreBox" class="infoBox" style="display:none; width:95px;
            background-color: #253494; border-style: solid; border-width: 5px;
            border-color: #081d58; padding: 5px; margin: 10px;
            font-family: Arial, Helvetica, sans-serif; color: #ffffff;
            float: left; text-align: center;">
                <div class="boxTitle">Tickets</div>

                <div class="boxContents" style="width:65px; height:60px;
                background-color: #ffffff; padding: 5px; margin-left: auto;
                margin-right: auto; margin-top: 5px;
                font-family: Arial, Helvetica, sans-serif; color: #081d58;
                text-align: center; font-size: x-large;">
                    <div class="textContents" id="scoreValue"
                    style="margin-top: 11px;"></div>
                </div>
            </div>

            <div id="avatarBox" class="infoBox" style="display:none; width:95px;
            background-color: #253494; border-style: solid; border-width: 5px;
            border-color: #081d58; padding: 5px; margin: 10px;
            font-family: Arial, Helvetica, sans-serif; color: #ffffff;
            float: left; text-align: center;">
                <div class="boxTitle">Player 2</div>

                <div class="boxContents" style="width:65px; height:60px;
                background-color: #ffffff; padding: 5px; margin-left: auto;
                margin-right: auto; margin-top: 5px;
                font-family: Arial, Helvetica, sans-serif; color: #081d58;
                text-align: center; font-size: xx-large;">
                    <img id="player2image" class="playerImage"
                    style="width:50px; height:50px;">
                </div>
            </div>
            <br><br><br><br><br><br><br><br>
        </div>

        <div id="message" style="width:80%;">
            <div id="giveInterface" style="display:none;">
                You have been given 
                <span id="rValueGiven" style="font-weight: bold;"></span> raffle 
                tickets.<br><br>
                How many tickets will you
                <span style="font-weight:bold;">give</span> to Player 2?<br><br>

                <div class="range-slider" data-slider>
                    <!-- UPDATE THE MAX HERE IF roundValue IS NOT 100. -->
                    <input type="range" id="giveNumber" min=0 max=100 step=1
                    value=0 oninput="outputUpdate(value)">
                        <output for="giveNumber" id="currentGiveValue">0
                        </output>
                </div><br>

                <a href="javascript:returnTickets()"><img id="giveButton"></a>
            </div>

            <div id="waitForReturn" style="display: none;">
                You gave Player 2
                <span id="gaveNumber" style="font-weight: bold;"></span> of your
                tickets. These tickets were tripled before being passed on.
                <br><br>
              
                Player 2 received 
                <span id="receiveNumber" style="font-weight: bold;"></span>
                tickets.<br><br>

                <div id="waitForMove" style="display: none;">
                    Player 2 will decide how many tickets to
                    return<span id="p2decidesToPunish" style="display: none;">
                        and whether to make you lose some of the tickets you
                        kept</span>.
                    <br><br>

                    Waiting for Player 2 to move. . . .<br><br>

                    <img id="waitingForPlayer2">
                </div>

                <div id="returnedTickets" style="display: none;">
                    Player 2 has returned 
                    <span id="returnedNumber" style="font-weight: bold;"></span>
                    tickets to you.<br><br>

                    <div id="controllerOption">
                        You may punish Player 2 by making them lose
                        <span id="p1punishmentNumber"
                        style="font-weight: bold;"> </span> of their tickets.
                        Would you like to do this?<br>
                    
                        <a href="javascript:endRound(1)" 
                        style="text-decoration: none;">
                            <img id="punishButton" style="padding: 5px;">
                        </a>&nbsp;
                    
                        <a href="javascript:endRound(0)">
                            <img id="noPunishButton" style="padding: 5px;">
                        </a>
                    </div>

                    <div id="player2punished" style="display: none;">
                        <span style="font-weight: bold;">
                            Player 2 decided to punish you!
                        </span>
                        You lost
                        <span id="p2punishmentNumber" style="font-weight:bold;">
                        </span> tickets!<br><br>
                    </div>

                    <div id="player2spared" style="display: none;">
                        Player 2 decided to not punish you!
                    </div>
                </div>
            </div>

            <div id="showEndButton" style="display:none;">
                <div id="noSharing">You kept all of your tickets.</div>

                <div id="punishmentSuccess">Player 2 has lost tickets!</div>
                
                <br><br>Press the button to end this round.<br>
            
                <a href="javascript:startRound(0)"><img id="endRound"></a>
            </div>     
        </div>

        <div id="instructions">
            <br>You have been assigned to the role of
            <span style="font-weight:bold;">Player 1</span>!<br><br>
        
            Each round, you will receive <span id="rValueIntro"></span> raffle
            tickets and will be matched with a different Player 2. <br><br>
            
            You may give as many of these tickets to Player 2 as you wish. Any
            tickets you give to Player 2 will be
            <span style="font-weight: bold;">tripled</span>. Then, Player 2 may
            return as many of the tripled tickets as they wish.<br><br>
            
            On <span id="p1ControllerRounds"></span> rounds, you will also get
            to be the <span style="font-weight: bold;">Controller</span>. On
            these rounds, you can punish Player 2 by making them lose one third
            of the tickets they kept if you think they played unfairly.<br><br>

            On <span id="p2ControllerRounds"></span> rounds, 
            <span style="font-weight: bold;">Player 2</span> will be the
            Controller. They will get to make you lose one third of the
            tickets you kept if they feel you played unfairly.<br><br>

            <div id="noControllerExplanation">
                On the remaining rounds, there will be 
                <span style="font-weight: bold;">no</span> Controller.
                All decisions by both players will be final.<br><br>
            </div>

            <div id="blockingExplanation">The Controller assignments will be 
                grouped so that you will play all of the rounds you are
                Controller in a row and the same for the rounds Player 2 is
                Controller.
            </div>

            <br><br>
            Ready to begin? Press the blue button power button below! If there's
            no button, just wait a few seconds for it to load.<br><br><br>
            <a href="javascript:showAvatars(0)"><img id="beginGame"></a>
        </div>
        
        <div id="selectAvatar" style="display:none;">
            Select an avatar to represent yourself in the game.<br>Your avatar
            will be shown to the players you are matched with.<br><br>

            <div id="avatarGrid">
                <a id="link0"><img id="avatar0" class="avatarIcon"></a>
                <a id="link1"><img id="avatar1" class="avatarIcon"></a>
                <a id="link2"><img id="avatar2" class="avatarIcon"></a>
                <a id="link3"><img id="avatar3" class="avatarIcon"></a>
                <a id="link4"><img id="avatar4" class="avatarIcon"></a>
                <a id="link5"><img id="avatar5" class="avatarIcon"></a>
                <a id="link6"><img id="avatar6" class="avatarIcon"></a>
                <a id="link7"><img id="avatar7" class="avatarIcon"></a>
                <a id="link8"><img id="avatar8" class="avatarIcon"></a>
                <a id="link9"><img id="avatar9" class="avatarIcon"></a>
                <a id="link10"><img id="avatar10" class="avatarIcon"></a>
                <a id="link11"><img id="avatar11" class="avatarIcon"></a>
                <a id="link12"><img id="avatar12" class="avatarIcon"></a>
                <a id="link13"><img id="avatar13" class="avatarIcon"></a>
                <a id="link14"><img id="avatar14" class="avatarIcon"></a>
                <a id="link15"><img id="avatar15" class="avatarIcon"></a>
                <a id="link16"><img id="avatar16" class="avatarIcon"></a>
                <a id="link17"><img id="avatar17" class="avatarIcon"></a>
                <a id="link18"><img id="avatar18" class="avatarIcon"></a>
                <a id="link19"><img id="avatar19" class="avatarIcon"></a>
                <a id="link20"><img id="avatar20" class="avatarIcon"></a>
                <a id="link21"><img id="avatar21" class="avatarIcon"></a>
                <a id="link22"><img id="avatar22" class="avatarIcon"></a>
                <a id="link23"><img id="avatar23" class="avatarIcon"></a>
                <a id="link24"><img id="avatar24" class="avatarIcon"></a>
                <a id="link25"><img id="avatar25" class="avatarIcon"></a>
                <a id="link26"><img id="avatar26" class="avatarIcon"></a>
                <a id="link27"><img id="avatar27" class="avatarIcon"></a>
                <a id="link28"><img id="avatar28" class="avatarIcon"></a>
                <a id="link29"><img id="avatar29" class="avatarIcon"></a>
            </div>
        </div>

        <div id="matchingPlayers" style="display:none;">
            <span id="youAreController">
                <span style="font-weight:bold;">
                    You will be Controller this round!
                </span>
                If you feel Player 2 plays unfairly, you will have the
                opportunity to punish them when the round is over.
            </span>

            <span id="noController">
                <span style="font-weight:bold;">
                    There will be no Controller this round.
                </span>
                The decisions made by both players will be final.
            </span>

            <span id="player2isController">
                <span style="font-weight:bold;">
                    Player 2 will be Controller this round.
                </span>
                If Player 2 feels you play unfairly, they will have the
                opportunity to punish you when the round is over.
            </span><br><br>
            
            <div id="loadingMatch" style="display:none;">
                Matching you with a player for Round
                <span id="matchRoundNumber"></span>. . . .<br><br>

                <img id="matchLoadBar">
            </div>

            <div id="playRound" style="display:none;">
                Match found! Press the button to start the round.<br><br>

                <a href="javascript:giveInterface()"><img id="playButton"></a>
            </div>
        </div>

        <div id="gameOver" style="display:none;">
            You've finished the game!<br><br>

            You have earned <span id="finalScore"></span> tickets for the $50
            raffle!<br><br>

            Press the continue button below to end the game and continue with
            the survey.<br><br>
        </div>
    </div>

    <div id="imageCredit">
        <div>Icons made by
            <a href="http://www.flaticon.com/authors/freepik" title="Freepik">
                Freepik
            </a>
            from
            <a href="http://www.flaticon.com" title="Flaticon">
                www.flaticon.com
            </a>
            are licensed by 
            <a href="http://creativecommons.org/licenses/by/3.0/"
            title="Creative Commons BY 3.0">CC BY 3.0.</a>
            <a href="http://www.flaticon.com/packs/cute-animals">
                Available here.
            </a>
        </div>
    </div>
<!-- ***************************************************************************
    END QUESTION TEXT
        
    Copy and paste the code above through the BEGIN QUESTION TEXT comment into
    the html editor for the question.
**************************************************************************** -->