<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<style>
.trialDiv {
  padding-left: 20px;
  width: 600px;
  margin: 0 auto;
  font-family: Arial, Helvetica;
  font-size: 14pt;
  margin-top: 100px;
  display: none;
}

input[type=submit] {
  text-align: center;
  font-family: Arial, Helvetica;
  font-size: 14pt;
  height: 50px;
  width: 70px;
  }

.wrapper {
  text-align: center;
}

#submitButton {
	display: none;
	margin: 0 auto;
	font-family: Arial, Helvetica;
	font-size: 14pt;
	margin-top: 100px;
	text-align: center;
	
}

.optionsDiv {
  padding-left: 20px;
  width: 600px;
  margin: 0 auto;
  font-family: Arial, Helvetica;
  font-size: 14pt;
  display:none;
}

#about {
	width: 800px;
	margin: 0 auto;
	font-family: Arial, Helvetica;
    font-size: 14pt;
	text-align: left;
	margin-top: 100px;
}

#instructions {
	width: 800px;
	margin: 0 auto;
	text-align:center;
	font-family: Arial, Helvetica;
    font-size: 14pt;
	text-align: left;
	margin-top: 100px;
	display:none;
}

#errormessage {
	width: 800px;
	margin: 0 auto;
	font-family: Arial, Helvetica;
    font-size: 14pt;
	text-align: left;
	margin-top: 100px;
	display: none;
}

#audiotest {
  	width: 800px;
	margin: 0 auto;
	text-align:center;
	font-family: Arial, Helvetica;
    font-size: 14pt;
	text-align: left;
	margin-top: 100px;
	display:none;
}

#exitsurvey {
  	width: 800px;
	margin: 0 auto;
	text-align:center;
	font-family: Arial, Helvetica;
    font-size: 14pt;
	text-align: left;
	margin-top: 100px;
	display:none;
}

#participate {
	color:white;
	text-decoration: none;
	font-family: Arial, Helvetica;

}
#participateButton {
	width: 200px;
	border: 4px outset steelblue;
	background: steelblue;
	padding: 5px;
	margin: 0 auto;
	text-align:center
}

#startExperiment {
	color:white;
	text-decoration: none;
	font-family: Arial, Helvetica;
}

#startexperimentButton {
	width: 200px;
	border: 4px outset steelblue;
	background: steelblue;
	padding: 5px;
	margin: 0 auto;
	text-align:center;
	display:none;
}

#likert { text-align:center; }
#likert td { width: 300px; }

.player {width: 200px}

</style>
<div id="about">
<h3 style="text-align: center">About</h3>
INSTRUCTIONS
</div>

<div id="audiotest">
<h2>Headphone check</h2>
<p>When you play each item you will hear three sounds separated by silences. Simply judge WHICH SOUND WAS SOFTEST (quietest) -- 1, 2, or 3?</p>
<h3>Item 1</h3>
<audio controls>
  <source src="https://bonniemclean.github.io/headcheck/middle.wav" type="audio/wav">
  <source src="https://bonniemclean.github.io/headcheck/middle.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p><input type="radio" name="item1" value=0> 1</p>
<p><input type="radio" name="item1" value=1> 2</p>
<p><input type="radio" name="item1" value=0> 3</p>
<h3>Item 2</h3>
<audio controls>
  <source src="https://bonniemclean.github.io/headcheck/first.wav" type="audio/wav">
  <source src="https://bonniemclean.github.io/headcheck/first.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p><input type="radio" name="item2" value=1> 1</p>
<p><input type="radio" name="item2" value=0> 2</p>
<p><input type="radio" name="item2" value=0> 3</p>
<h3>Item 3</h3>
<audio controls>
  <source src="https://bonniemclean.github.io/headcheck/last.wav" type="audio/wav">
  <source src="https://bonniemclean.github.io/headcheck/last.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p><input type="radio" name="item3" id="item3" value=0> 1</p>
<p><input type="radio" name="item3" id="item3" value=0> 2</p>
<p><input type="radio" name="item3" id="item3" value=1> 3</p>

<a href="#" id="continue">Continue</a>
</div>

<div id="errormessage">
<p style="text-align:center">Your test results indicate you aren't using headphones. Please use headphones if you want to participate.</p>
<a href="#" id="again">Try again</a>

</div>

<div id="instructions">
    <p style="text-align:center"> Thank you for wearing headphones. You may now continue to the experiment.</p>
</div>
<div id = "participateButton">
<a href="#" id="participate">Participate</a>
</div>

<div id = "startexperimentButton">
<a href="#" id="startexperiment">Start</a>
</div>

<form action="experimentX.php" method="post">

<!---TRIAL START!---->

<div id="trial1" class="trialDiv">
<p style="text-align: center">Listen to the words below.</p>
<p style="text-align: center" id='trans1'></p>
<input type="hidden" name="chosentrans1" value="" id="chosentrans1">
<table id="likert">
<tr>
<td><audio id='realplayer-1' class="player" controls controlsList="nodownload">
  <source src="ANSWER_MEDIA" type="audio/mpeg">
Your browser does not support the audio element.</audio></td>
<td><audio id='foilplayer-1' class="player" controls controlsList="nodownload">
  <source src="https://www.honestcookingblog.com/soundfiles/tehe.mp3" type="audio/mpeg">
Your browser does not support the audio element.</audio></td>
</tr>
<input type="hidden" name="chosenfoil1" value="" id="chosenfoil1">
<tr>
<td>A</td>
<td>B</td>
</tr>
  </table>
</div>
<div id="options1" class="optionsDiv">
<br>
<br>
<p style="text-align: center" id='ques1'></p>
<table id="likert">
     <tr>
         <td><input type="radio" class="responseButton" name="q1" value="A" /></td>
         <td><input type="radio" class="responseButton" name="q1" value="B" /></td>
     </tr>
     <tr>
         <td>A</td>
         <td>B</td>
     </tr>
  </table>
    <input type="hidden" name="rt1" value="0" id="reactionTime1">
</div>

<!---EVEN TRIAL!---->

<div id="trial1" class="trialDiv">
<p style="text-align: center">Listen to the words below.</p>
<p style="text-align: center" id='trans1'></p>
<input type="hidden" name="chosentrans1" value="" id="chosentrans1">
<table id="likert">
<tr>
<td><audio id='foilplayer-1' class="player" controls controlsList="nodownload">
  <source src="https://www.honestcookingblog.com/soundfiles/tehe.mp3" type="audio/mpeg">
Your browser does not support the audio element.</audio></td>.
<input type="hidden" name="chosenfoil1" value="" id="chosenfoil1">
<td><audio id='realplayer-1' class="player" controls controlsList="nodownload">
  <source src="ANSWER_MEDIA" type="audio/mpeg">
Your browser does not support the audio element.</audio></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
  </table>
</div>
<div id="options1" class="optionsDiv">
<br>
<br>
<p style="text-align: center" id='ques1'></p>
<table id="likert">
     <tr>
         <td><input type="radio" class="responseButton" name="q1" value="A" /></td>
         <td><input type="radio" class="responseButton" name="q1" value="B" /></td>
     </tr>
     <tr>
         <td>A</td>
         <td>B</td>
     </tr>
  </table>
    <input type="hidden" name="rt1" value="0" id="reactionTime1">
</div>


<!---TRIAL END!---->


<div id="exitsurvey">
<h2 style="text-align:center">Thank you!</h2>
OUTRO_QUESTIONS
<div style="text-align:center">
<p><input type="submit" name="submit"></p>
</div>

</div>

<!--POST EXPERIMENT INFORMATION COLLECTION-->
<!--Include a short text description of the experiment to check people were paying attention-->
<script>
$.ajaxSetup({
  cache: false
});
var allfoils=[[],[]];
var alltrans=[[],[]];
var foil_choices=[];
var trans_choices=[];

var i;
for (i=0;i<2;i++) {
    //Choose a translation
	trans=alltrans[i];
	transchoice=trans[Math.floor(Math.random()*trans.length)];
	trans_choices.push(transchoice);
	$('#chosentrans'+(i+1)).attr("value",transchoice)
	//Choose a foil
	foils=allfoils[i];
	foilchoice=foils[Math.floor(Math.random()*foils.length)];
	foil_choices.push(foilchoice);
	$('#chosenfoil'+(i+1)).attr("value",foilchoice)
}

//REMEMBER TO UPDATE THE ARRAY YOU'RE SHUFFLING 
var shuffled = shuffle([3,4,5,6]);
var trialOrder =[1,2].concat(shuffled);
var curTrial=0;
//REMEMBER TO UPDATE THE NUMBER OF TRIALS BELOW 
var nTrials=6;
var startTrialTime;
// The firstgo variable is to allow them to play the media multiple times without resetting the reaction time count

var firstgo='True';


function audioplayed() {
	if(firstgo=='True'){
	$('#options'+trialOrder[curTrial]).show();
	startTrialTime=new Date();
	firstgo='False'}
}

function buttonClicked() {
	var curTime = new Date();
	var rt = curTime - startTrialTime;
	$('#reactionTime' + trialOrder[curTrial]).val(rt);
	// If you want to change another attribute of an object use this
	//$('#reactionTime'+curTrial).attr("value",rt);
	console.log(rt);
	$('#trial'+trialOrder[curTrial]).hide();
	$('#options'+trialOrder[curTrial]).hide();
	curTrial++;
	if (curTrial >= nTrials) {
		$('#exitsurvey').show();
	} else {	
		$('#trial'+trialOrder[curTrial]).show();
		firstgo='True';
	}
}
function showFirstTrial() {
	$('#trial'+trialOrder[0]).show();
	
}

function showAudioTest() {
	$('#about').hide();
	$('#participateButton').hide();
	$('#audiotest').show()
}

function processAudioTest() {
  first=$( "input[type=radio][name=item1]:checked" ).val()
  second=$( "input[type=radio][name=item2]:checked" ).val()
  third=$( "input[type=radio][name=item3]:checked" ).val()
  score=first+second+third
  if (score>=2) {
    $('#instructions').show();
    $('#startexperimentButton').show();
    $('#audiotest').hide();
  } else {
    $('#audiotest').hide();
    $('#errormessage').show()
  }
  
}

function showInstructions() {
	$('#about').hide();
	$('#participateButton').hide();
	$('#instructions').show();
	$('#startexperimentButton').show();
}

function showpractice() {
    $('#instructions').hide();
	$('#startexperimentButton').hide();
	$('#trial1').show();
	}
	

function tryagain() {
  $('#errormessage').hide()
  $('#audiotest').show()
}

function easystart() {
	$('#about').hide();
	$('#participateButton').hide();
	$('#trial1').show();

}

/* Fisher-Yates shuffle */
function shuffle(o){
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
}

function showoptions(){
$('#realplayer-'+trialOrder[curTrial]).bind("ended", function(){
$('#foilplayer-'+trialOrder[curTrial]).bind("ended",audioplayed)
});
$('#foilplayer-'+trialOrder[curTrial]).bind("ended", function(){
$('#realplayer-'+trialOrder[curTrial]).bind("ended",audioplayed)
});
}


$('#participate').click(showAudioTest);
$('#again').click(tryagain);

$('#continue').click(processAudioTest);
$('#startexperiment').click(showpractice);

$('.player').bind('play',showoptions);
$('.responseButton').click(buttonClicked);


</script>
</form>