Auditory illusion lab: Template
Optional HTML Template for Class Gallery
Make a folder with a relatively short name, e.g. "violintone". Make a document in that folder with the name "index.html", and copy the following code into it. You will need to put all files that you want to appear on the webpage in that folder. Complete all the TODO sections. Your page will look something like this.
You do not need to follow this template, as long as you clearly include the elements described on the tasks page. The template is here to help if you'd like, otherwise feel free to personalize your page.
Remember that others will be looking at this webpage to understand your illusion, so you should keep the goal of communicating to others in mind as you write your text! Connecting your illusion to concepts you learned in class will be helpful for that.
<![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by TEMPLATED
http://templated.co
Released for free under the Creative Commons Attribution License
Name : Retention
Description: A two-column, fixed-width design with dark color scheme.
Version : 1.0
Released : 20140221
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>9.35 Illusion Lab</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet" />
<link href="../../default.css" rel="stylesheet" type="text/css" media="all" />
<link href="../../fonts.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1><a href="#">9.35 Illusion Laboratory</a></h1>
<p>Spring 2020 Auditory Lab</p>
</div>
<div id="banner"> <a href="#" class="image"><img src="images/pic01.jpg" alt="" /></a> </div>
</div>
</div>
<div id="menu-wrapper">
<div id="menu" class="container">
<ul>
<li><a href="../../index.html">Homepage</a></li>
<li><a href="../../tasks.html">Tasks</a></li>
<li><a href="../../review.html">Illusion review</a></li>
<li><a href="../../signup.html">Meeting signup</a></li>
<li class="current_page_item"><a href="../../gallery.html">Gallery</a></li>
<li><a href="../../resources.html">Resources</a></li>
<li><a href="../../rubric.html">Rubric</a></li>
<li><a href="../../archives.html">Past Years</a></li>
</ul>
</div>
<!-- end #menu -->
</div>
<div id="page" class="container">
<div>
<div class="title">
<h2>TODO: insert your scientific question as clear & concise as possible</h2>
<span class="byline">TODO: Insert your name if you wish.</span> </div>
<p>TODO: insert your 2 paragraph explanation of your demo design here.</p>
<p>If headphones should be used (e.g. because you're using spatial sound), say that here.</p>
<!-- Here is some template code to help you insert sounds and images into the page: -->
<!-- How to insert sounds -->
<audio controls>
<source src="TODO:my_sound_name.wav" type="audio/wav">
Your browser does not support the audio element.
</audio><br>
<!--WAV files will work best-->
<!-- How to insert images:-->
<img src="TODO:my_image_name.png" width=500/><br>
<!--You can use the width parameter to change the size of your image-->
<!--src could be a gif, png, jpeg, etc.-->
<!-- How to insert images that play sounds when you click them -->
<audio id="s1">
<source src="TODO:my_sound_name.wav" type="audio/wav"/>
</audio>
<img src="TODO:my_image_name.png" width=500 onClick="document.getElementById('s1').play(); return false;" style="cursor: pointer;"/><br>
<!-- you can use any short name in place of "s1" for audio id, it's just how the browser knows which sound to play using "getElementByID" -->
<p>TODO: insert the full citation to the papers that inspired you here.<p>
</div>
</div>
</div>
<div id="copyright" class="container">
<p> CC BY-NC. | Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>.</p>
</div>
</body>
</html>
]]>
