<link href="https://s3.amazonaws.com/mcgurkstimuli/McGurkExperimentClick.css" rel="stylesheet" type="text/css" />
<p><input id="cong" name="cong" style="display:none" value="${cong}" /> <input id="mcg" name="mcg" style="display:none" value="${mcg}" /> <input id="cRep" name="cRep" style="display:none" value="${cRep}" /> <input id="mRep" name="mRep" style="display:none" value="${mRep}" /></p>
<script>

var time0;
var resp;
var trialNum=0;
var videos;
var N;
data=[];
var stim;
window.onload = beginTask;

//Generating the stimulus sequence
function generateVideos() {
    var tmp = [];
    var mcgTmp = [];
    var allStim = newStimArr();
    var congruent = allStim[0];
    var mcgurk = allStim[1];
    var congReps = allStim[2];
    var mcgReps = allStim[3];
    videos = [];
    for(var i = 0; i < congruent.length; i++){
        for(var j = 0; j<congReps; j++){
            tmp.push(congruent[i]);
        }
    }
//shuffling congruent stimuli
    tmp = shuffle(tmp);

//Generating McGurk sequence and adding congruent stimuli
    for(var b = 0; b<mcgReps; b++){
        for(var a =0; a<mcgurk.length; a++){
            mcgTmp.push(mcgurk[a]);
        }
        mcgTmp.push(tmp[b]);
    }

//shuffling each block
    for(var c = 0; c<mcgTmp.length;c+=(mcgReps+1)){
        videos.push(shuffle(mcgTmp.slice(c, c+(mcgReps+1))));

    }

//Flattening array of arrays
    videos = [].concat.apply([], videos);
    //return videos;
}

//This function generates sequence of videos based on congruent and mcgurk repetitions and puts them together and shuffles them
function shuffleVideoSeq() {
    var tmp = [];
    var mcgTmp = [];
    var allStim = newStimArr();
    var congruent = allStim[0];
    var mcgurk = allStim[1];
    var congReps = allStim[2];
    var mcgReps = allStim[3];
    videos = [];
    for (var i = 0; i < congruent.length; i++) {
        for (var j = 0; j < congReps; j++) {
            tmp.push(congruent[i]);
        }
    }
//shuffling congruent stimuli
    tmp = shuffle(tmp);

//Generating McGurk sequence and adding congruent stimuli
    for (var b = 0; b < mcgReps; b++) {
        for (var a = 0; a < mcgurk.length; a++) {
            mcgTmp.push(mcgurk[a]);
        }
    }
// shuffling mcgurk videos
    mcgTmp = shuffle(mcgTmp);

//Adding congruent
    videos = mcgTmp.concat(tmp);
// shuffle whole sequence again
    videos = shuffle(videos);
}


function checkLoaded() {
    return document.readyState === "complete";
}


function newStimArr(){
    var cong = String(document.getElementById('cong').value).split('|');
    var mcg = String(document.getElementById('mcg').value).split('|');
    var cRep = parseInt(document.getElementById('cRep').value);
    var mRep = parseInt(document.getElementById('mRep').value);
    return [cong, mcg, cRep, mRep];
}



//to randomly arrange stimuli
function shuffle(X) {
    var N = X.length - 1;
    var t = 0;
    for (var i = N; i > 0; i--) {
        var r = Math.floor(( i + 1) * Math.random());
//r is random integer from 0 to i;
// swap the ith element with the rth element;
        t = X[r];
        X[r] = X[i];
        X[i] = t;
    }
    return X
}



function disableButtons(){
    var col = "#A9A9A9";
    document.getElementById('ba').disabled = true;
    document.getElementById('da').disabled = true;
    document.getElementById('ga').disabled = true;
    document.getElementById('ba').style.color = col;
    document.getElementById('da').style.color = col;
    document.getElementById('ga').style.color = col;
}

function enableButtons(){
    document.getElementById('ba').disabled = false;
    document.getElementById('da').disabled = false;
    document.getElementById('ga').disabled = false;
    document.getElementById('ba').style.color = "white";
    document.getElementById('da').style.color = "white";
    document.getElementById('ga').style.color = "white";
}

function setupStim(){
    stim = document.getElementById('movie');
    stim.addEventListener('loadeddata', function() {
        stim.play();
        setTimeout(enableButtons,stim.duration*1000);
    }, false);
}


function Demo(){
    var demoVid = document.getElementById('demoVid');
    demoVid.play();
    //generateVideos();
    shuffleVideoSeq();
    document.getElementById('start').style.visibility = "visible";
    N = videos.length;
}

function beginTask(){
    document.getElementById('demoButton').style.visibility = "visible";
}

function Stimulus(trialNum, movieName,response, rt) {
    this.trialNum = trialNum;
    this.movieName = movieName;
    this.response = response;
    this.rt=rt;
}

function showOptions(){
    document.getElementById('ba').style.visibility = "visible";
    document.getElementById('da').style.visibility = "visible";
    document.getElementById('ga').style.visibility = "visible";
}

function hideOptions(){
    document.getElementById('ba').style.visibility = "hidden";
    document.getElementById('da').style.visibility = "hidden";
    document.getElementById('ga').style.visibility = "hidden";
}

function hideEverything(){
    hideOptions();
    hide('movie');
}

Stimulus.prototype.toString = function () {
    var trial = "<input type='hidden' name='Trial_" + String(this.trialNum +1)+"'" + " value = " + (this.trialNum +1) + ">";
    var stimulus = "<input type='hidden' name='stimulus_"+ String(this.trialNum +1)+"'" + " value = " + this.movieName + ">";
    var resp = "<input type='hidden' name='Response_"+String(this.trialNum +1)+"'"+ " value = " + this.response + ">";
    var responseTime = "<input type='hidden' name='ReactionTime_"+String(this.trialNum +1)+"'"+" value = " + this.rt + ">";
    var output = trial + stimulus + resp + responseTime;
    return output
};

function hide(ID){
    document.getElementById(ID).style.visibility = "hidden";
}


function playVideo(){

    document.getElementById('instructions').innerHTML = "";
    document.getElementById('demoVideoBox').innerHTML = "";
    stim = document.getElementById('movie');
    stim.src = String(videos[trialNum]).trim();
    document.getElementById('p3').innerHTML = (trialNum + 1)+ ' / '+ N;
    showOptions();
    disableButtons();
    stim.addEventListener('loadeddata', function() {
        stim.play();
        setTimeout(enableButtons,stim.duration*1000);
    }, false);
    time0=performance.now();
    return time0;
}


function choice(resp){
    var time1 = performance.now();
    stim.rt = Math.round(time1-time0);
    stim.response = resp;
    videos[trialNum] = new Stimulus(trialNum,stim.src,resp,stim.rt);
    videos[trialNum].rt = stim.rt;
    videos[trialNum].response = stim.response;
    videos[trialNum].movieName = stim.src;
    videos[trialNum].trial=trialNum;
    data +=videos[trialNum];
    trialNum++;
    if (trialNum<N){
        disableButtons();
        playVideo();
    }
    else {
	
        hide('movie');


	    document.getElementById('ba').style.visibility = "hidden";
	    document.getElementById('da').style.visibility = "hidden";
	    document.getElementById('ga').style.visibility = "hidden";

        document.getElementById("inputfields").innerHTML = data;
        document.getElementById('p3').innerHTML = "Thank you for your participation. In order to receive credit, please click the submit button.";
        document.getElementById("submitButton").style.visibility = "visible";
    }
}
</script>

<div id="container">
<h3 id="taskDescp">Watch 10 minutes of videos and transcribe what is said.</h3>

<div class="highlight-box" id="highlight-box">
<ul>
	<li>Please accept this HIT before making any responses. Accepting the HIT after making responses can erase responses.</li>
</ul>

<ul>
	<li>This task requires that you watch the video and listen to the soundtrack. Please resize the window so that it fills as much of your screen as possible and adjust the volume so that you can clearly hear the soundtrack.</li>
</ul>

<ul>
	<li>Although on average this task takes about 10 minutes to complete, the task will not expire for an hour.</li>
</ul>
</div>

<p id="consent">The results of these questions are being used for a scientific study. <a href="${consentLink}" id="consentForm" target="_blank">Click here (opens in new window)</a> to learn more about the study details. By accepting this HIT, you are consenting to take part in the study. If you do not wish to take part, do not accept the HIT.</p>

<div class="demographics" id="demographics">
<p>&nbsp;</p>

<ul>
	<li>Full Name: <input name="name" type="text" /></li>
</ul>

<p>&nbsp;</p>
</div>

<hr id="line" />
<p class="instructions" id="taskname"><b>Audiovisual Task</b></p>

<p class="instructions" id="instructions">You will see videos and hear audio clips of a person saying syllables. Please watch the screen at all times. After each video, press a button to indicate what the person said. If you are not sure, take your best guess. The buttons are inactive while the video is playing.<br />
Play the demo video to ensure that you can hear the actor and see the actor&#39;s entire face clearly. You can play the demo video multiple times.<br />
Press the &quot;Begin Task&quot; button to start...</p>

<div id="demoVideoBox">
<table height="500px" width="1000px">
	<tbody>
		<tr>
			<td width="640px">
			<video height="480px" id="demoVid" width="640px"><source src="${demoLink}" /></video>
			</td>
			<td>
			<p>Please accept HIT before playing the demo.<br />
			If you can see the entire face of the actor, click the &quot;Play Demo Video&quot; button below.</p>

			<p><button id="demoButton" onclick="Demo()" type="button">Play Demo Video</button></p>

			<p><button class="startButton" id="start" onclick="playVideo()" type="button">Begin Task</button></p>
			</td>
		</tr>
	</tbody>
</table>
</div>

<div id="taskVideoBox">
<table height="500px" width="1000px">
	<tbody>
		<tr>
			<td width="640px">
			<video height="480px" id="movie" onended="showOptions()" width="640px"><source /></video>
			</td>
			<td id="buttonCounter">
			<p class="counter" id="p3">&nbsp;</p>

			<p><button class="button1" id="ba" onclick="choice('BA')" type="button">BA</button></p>

			<p><button class="button2" id="da" onclick="choice('DA')" type="button">DA / THA</button></p>

			<p><button class="button3" id="ga" onclick="choice('GA')" type="button">GA</button></p>

			<p><input id="submitButton" type="submit" /></p>
			</td>
		</tr>
	</tbody>
</table>
</div>

<div id="inputfields">&nbsp;</div>

<div id="browser">&nbsp;</div>
</div>
