I would like for the javascript to have a random array for an audio file which is then placed into the audio controls tag in html. Then, depending on which audio file was picked, another randomized array will begin to place an image into a div and so on and so forth.
<!DOCTYPE html>
<head>
<title>Learn</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/Timhasnoinput.js"></script>
<!-- <script src="js/stuff.js"></script> -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://ift.tt/VVsZ3e">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- This code is taken from http://ift.tt/NoligE -->
<div class="header-wrapper">
<div class="container">
<div class="row-fluid">
<div class="site-name">
<h1>Music Website</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="menu">
<div class="navbar">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<i class="fw-icon-th-list"></i>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="Learn.html">Learn</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">→ Hello</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">About</option>
<option value="#">Learn</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12 ">
<div class="main-caption">
<h1>Music Website</h1>
<h6>Learning Music</h6>
</div>
<div class="Timmy2">
<h4><a href="Learn4.html">< Lesson 2</a></h4>
<h6></h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12">
<div class="banner">
<div class="audiobuttonholder">
<div class="audioholder" style="padding-bottom:24px;">
<audio controls>
<source src= audio_1 type="audio/mpeg">
hello
</audio>
</div>
<div class="buttonholder"; style="position: absolute; left: 10px; top: 40px;">
</div>
<div class = "numberPage">
Pg. 3 Trebble Cleff
</div>
<div class = "control">
<ul>
<div id="div1" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
</div>
<input type="image" id="myimage1" style="height:200px;width:200px;"
onclick="showDivOne()"/>
</ul>
<ul>
<div id="div2" style="display:none; float: right; margin-right: 120px;" >
</div>
<input type="image" id="myimage2" style="height:200px;width:200px; padding-
top:24px;" onclick="showDivTwo()"/>
</ul>
<ul>
<div id="div3" style="display:none; float: right; margin-right: 120px;
padding-top: 40px;" >
</div>
<input type="image" id="myimage3" style="height:200px;width:200px;
paddingtop:24px;" onclick="showDivThree()"/>
</ul>
<ul>
<div id="div4" style="display:none; float: right; margin-right: 120px;
margin-
top: 40px;" >
</div>
<input type="image" id="myimage4" style="height:200px;width:200px;"
onclick="showDivFour()" />
</ul>
<!--
<div id="welcomeDiv" style="display:none;" > <input type="image"
id="myimage" style="height:150px;width:400px;" src="Continue.png" /></div>
<input type="image" name="answer" src="Continue.png" onclick="showDiv()" />
-->
<!--
<div id="welcomeDiv" style="display:none;" >
<img src = "GoodJob.png"></img>
</div>
<input type="image" id = "HaveFun" style="height:200px;width:200px;" src =
"HighE.gif" onclick="showDiv()" />
-->
</div>
</div>
</div>
</div>
</div>
<div class="featured-images">
<ul class="grid effect-8" id="grid">
<li>
<div class="block">
<div class="Timmy2">
<h4><a href="Learn3.html">< Lesson 2</a>
</h4>
<h6></h6>
</div>
</div>
</li>
</ul>
<div class="block-content">
<div class="user-info">
<h4><a href="index.html">Home</a></h4>
<h6> </h6>
</div>
<div class="user-info">
<h4><a href="Learn.html">Learn</a></h4>
<h6> </h6>
</div>
<div class="user-info">
<h4><a href="contact.html">Contact</a>
</h4>
<h6> </h6>
</div>
</div>
</div>
</div>
</div>
<script>
function() {
document.getElementById("audio1").innerHTML = rand_audio_1;
var audio_1 = ["LowATrebbleCleffPianoVC.mp3"],
["LowETrebbleCleffPianoVC.mp3"],["LowGTrebbleCleffPianoVC.mp3"],
["MidBTrebbleCleffPianoVC.mp3"],["MidCTrebbleCleffPianoVC.mp3"],
["MidDTrebbleCleffPianoVC.mp3"];
var rand_audio_1 = audio_1[Math.floor(Math.random()*audio_1.length)];
}
function() {
if (audio_1[0]){
document.getElementById("rand1").innerHTML = "<img src='LowA.gif'>";
var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"];
var rand1 = R1[Math.floor(Math.random()* R1.length)];
} else if(audio_1[1]){
document.getElementById("rand1").innerHTML = "<img src='LowE.gif'>";
var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"];
var rand1 = R1[Math.floor(Math.random()* R1.length)];
} else if(audio_1[2]){
document.getElementById("rand1").innerHTML = "<img src='LowG.gif'>";
var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"];
var rand1 = R1[Math.floor(Math.random()* R1.length)];
} else if(audio_1[3]){
document.getElementById("rand1").innerHTML = "<img src='MidB.gif'>";
var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"];
var rand1 = R1[Math.floor(Math.random()* R1.length)];
} else if(audio_1[4]){
document.getElementById("rand1").innerHTML = "<img src='MidC.gif'>";
var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"];
var rand1 = R1[Math.floor(Math.random()* R1.length)];
} else {
document.getElementById("rand1").innerHTML = "<img src='MidD.gif'>";
var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"];
var rand1 = R1[Math.floor(Math.random()* R1.length)];
}
}
function() {
if (R1[0]) {
document.getElementById('div1').innerHTML = "<img src='GoodJob.png'>";
} else if(R1[1]) {
document.getElementById('div2').innerHTML = "<img src='GoodJob.png'>";
} else if(R1[2]){
document.getElementById('div3').innerHTML = "<img src='GoodJob.png'>";
} else if(R1[3]) {
document.getElementById('div4').innerHTML = "<img src='GoodJob.png'>";
} else {
document.getElementById('div5').innerHTML = "<img src='GoodJob.png'>";
}
}
}
</body>
Aucun commentaire:
Enregistrer un commentaire