view templates.py @ 23:c74245e41387

• Converted audio files to MP3 • Added disclaimer on welcome page • Changed code to handle mp3 files
author Daniele Barchiesi <daniele.barchiesi@eecs.qmul.ac.uk>
date Mon, 25 Mar 2013 13:47:06 +0000
parents e4921590577e
children
line wrap: on
line source
audiotempl= '''
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html lang="en" dir="ltr">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8;charset=utf-8" >
	<link rel="stylesheet" type="text/css" href="../htempl/barrensa.css" TITLE="combined" />
	<link rel="stylesheet" href="../build/mediaelementplayer.min.css" TITLE="combined">
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>Audio Environment Classification</title>	
	
	<script src="../build/jquery.js"></script>	
	<!script src="../build/mediaelement-and-player.min.js"></script>


	<script language = "JavaScript">
	
	window.onload = function () {
	document.getElementById("a1")[%i].selected = true;
	}

	</script>
	
	<script language="JavaScript" src="../js/gen_validatorv4.js"
	    type="text/javascript" xml:space="preserve"></script>
</head>

<body>
   
   <div id="mainPicture">
   <div class="picture">
   <div id="headerTitle">Audio Environment Classification</div>
   </div>
   </div>
   <div class="contentBox">

  <h3 id="test 1">%i/%i</h3><br>
  <h4>Please play the sounds and indicate where they have been recorded </h4>
   
<form name="attributes" action="doAttrib" method="POST">
   <audio id="audio player 1" controls>
     <source src="../AASPAudio/%s.mp3" type="audio/mp3">
   <object class="playerpreview" type="application/x-shockwave-flash" data="player_mp3_mini.swf" width="200" height="20"><param name="movie" value="player_mp3_mini.swf" /><param name="bgcolor" value="#085c68" /><param name="FlashVars" value="mp3=../AASPAudio/%s.mp3" /><embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200" height="20" name="movie" align="" type="application/x-shockwave-flash" flashvars="mp3=../AASPAudio/%s.mp3" /></object>
   </audio>
<br>

   <select name="attribute1" id="a1">
   <option value="0"></option>
	<option value="1">bus</option>
   <option value="2">busy street</option>
   <option value="3">office</option>
	<option value="4">open air market</option>
	<option value="5">park</option>
	<option value="6">quiet street</option>
	<option value="7">restaurant</option>
	<option value="8">supermarket</option>
   <option value="9">tube</option>
	<option value="10">tube station</option>
   </select>
   
	<input type="hidden" name="pageId" value="%i">
	<input type="hidden" name="sessionId" value="%s">
	
	<input type="submit" value="submit" name="submitButton"/>
	
	</form>
	
	<script language="JavaScript" type="text/javascript"
   xml:space="preserve">//<![CDATA[
   var frmvalidator  = new Validator("attributes");
   
	frmvalidator.addValidation("attribute1","dontselect=0", "Please select at least one main attribute for each item");
	//]]></script>
	
	</div>
   
   </div>
   
   </body>

<script>
$('audio,video').mediaelementplayer();
</script>
</html>
'''

welcome_templ= '''
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html lang="en" dir="ltr">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8;charset=utf-8" >
	<link rel="stylesheet" type="text/css" href="../htempl/barrensa.css">
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Environment Classification</title>	
<script language="JavaScript" src="../js/gen_validatorv4.js"
    type="text/javascript" xml:space="preserve"></script>
</head>
<body>
<div id="mainPicture">
    	<div class="picture">
        	<div id="headerTitle">Environment Classification - Listening test</div>
    </div>
		<div class="contentBox">
		<h2>Welcome!</h2><br />
      The goal of this test is to evaluate the human ability to understand the environment in which sounds have been recorded. You will listen to 30-seconds audio recordings and will be asked to choose between one of the following categories:
      <ul>
      <li>Bus</li>
      <li>Busy street</li>
      <li>Office</li>
      <li>Open-air market</li>
      <li>Office</li>
      <li>Park</li>
      <li>Quiet street</li>
      <li>Restaurant</li>
      <li>Supermarket</li>
      <li>Tube (underground)</li>
      <li>Tube station</li>
      </ul>
		<br />
      There are a toal of 100 recordings, but feel free to answer to as few or as many questions you like. Please do not hit the back button as this would prevent the logging of your answers. If you are not sure about the category of a recording, just give your best guess!
      <br/><br/>
   
<form name="userinfos" action="doStart" method="POST">
<div class="selects">
</p>
Select Username<br />
<input type="text" name="uinfo00" id="uinfo00" />
<br /><br />

Age<br />
<select name="uinfo01" id="uinfo01">
  <option value="0"></option>
  <option value="1">< 18</option>
  <option value="2">18-24</option>
  <option value="3">25-34</option>
  <option value="4">35-44</option>
	<option value="5">45-54</option>
	<option value="5">55-64</option>
	<option value="6">65-74</option>
	<option value="7">> 74</option>
</select>
<br /><br />
It is encouraged to use high quality headphones for this test. Please specify (the closest to) your listening conditions:
<br />
<select name="info1" id="info1">
  <option value="0"></option>
  <option value="1">high quality headphones</option>
  <option value="2">low quality headphones</option>
  <option value="3">loudspeakers / professional studio</option>
	<option value="4">loudspeakers / semi-professional studio</option>
	<option value="5">hifi speakers / home</option>
</select>
<input type="hidden" name="pageId" value="0">
<input type="hidden" name="sessionId" value="%s">
<input type="submit" value="submit" name="startButton">
</p>
</form>

<script language="JavaScript" type="text/javascript"
    xml:space="preserve">//<![CDATA[
  var frmvalidator  = new Validator("userinfos");

  frmvalidator.addValidation("uinfo00","req","Please select a username");
  frmvalidator.addValidation("uinfo00","maxlen=20",	"Max length for username is 20");
  frmvalidator.addValidation("uinfo00","minlen=3",	"Min length for username is 3");
  frmvalidator.addValidation("uinfo01","dontselect=0", "Please specify all information");

  frmvalidator.addValidation("info1","dontselect=0", "Please specify all information");

//]]></script>


</div>
	<br />
<h3>Thank you for participating in this project!</h3><br />
	<br/>
	<br/>
	Disclaimer:
	
	Please note that the test is NOT intended to test your hearing ability or to assess your skills as an individual. The test is anonymous and participants will be only identified by their username and by a unique code that is generated by the system. Nonetheless, if you wish that your test should not be included in the analysis and publication of this study, please send an email to daniele.barchiesi@eecs.qmul.ac.uk quoting your username and the date when you took the test.
	</div>
</body>

</html>
'''

endtempl = '''
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
</head>
<body>
<p>results</p>
<table border="1">
<tr>
<th>Audio File</th>
<th>Main 1</th>
<th>Main 2</th>
<th>Other 1</th>
<th>Other 2</th>
</tr>
%s
</table>
<p> <a href="http://www.elec.qmul.ac.uk/digitalmusic">thanks!</a> </p>
</body>
</html>
'''
#<p> <a href="/out/">thanks!</a> </p>

endtempl2 = '''
<tr>
<td>%s</td>
<td><center>%s</center></td>
<td><center>%s</center></td>
<td><center>%s</center></td>
<td><center>%s</center></td>
</tr>
'''