Exercise 9

sebschu · May 5, 2017 · ff3285e · ff3285e
1 parent 578355d
commit ff3285e
Show file tree

Hide file tree

Showing 21 changed files with 121 additions and 0 deletions.
diff --git a/exercises/09_js_audio/README.md b/exercises/09_js_audio/README.md
@@ -0,0 +1,17 @@
+# Exercise 9: Loading Audio via Javascript
+
+In this exercise, you will include an audio player via Javascript so that you can
+go through multiple audio files. Use the skeleton in `exercises/09_js_audio/exercise.html`.
+
+In this exercise, I defined a list of stimuli in the file `stims.js`. You don't need
+to edit this file but take a look at it, so that you know the structure of each
+stimulus.
+
+# Steps
+
+1. Complete the function `loadNextAudio`. You just have to update the title and
+you have to include the HTML for the audio player with the correct audio. (Hint:
+  use the `text` and `html` functions).
+
+  Also, try to understand what is happening with the variable `i` and why you can
+  loop through the list multiple times.
diff --git a/exercises/09_js_audio/audio/boogalooo.mp3 b/exercises/09_js_audio/audio/boogalooo.mp3
diff --git a/exercises/09_js_audio/audio/boogalooo.ogg b/exercises/09_js_audio/audio/boogalooo.ogg
diff --git a/exercises/09_js_audio/audio/flamingo.mp3 b/exercises/09_js_audio/audio/flamingo.mp3
diff --git a/exercises/09_js_audio/audio/flamingo.ogg b/exercises/09_js_audio/audio/flamingo.ogg
diff --git a/exercises/09_js_audio/audio/twist.mp3 b/exercises/09_js_audio/audio/twist.mp3
diff --git a/exercises/09_js_audio/audio/twist.ogg b/exercises/09_js_audio/audio/twist.ogg
diff --git a/exercises/09_js_audio/exercise.html b/exercises/09_js_audio/exercise.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Audio and Javscript</title>
+    <script src="js/jquery.js" charset="utf-8"></script>
+    <script src="js/stims.js" charset="utf-8"></script>
+    <script src="js/functions.js" charset="utf-8"></script>
+
+  </head>
+  <body>
+    <h1> Audio and Javascript</title>
+    <h3 id="title"></h3>
+    <div id="audio-container">
+
+    </div>
+
+    <p><input type="button" onclick="loadNextAudio();" value="Next"/>
+  </body>
+</html>
diff --git a/exercises/09_js_audio/js/functions.js b/exercises/09_js_audio/js/functions.js
@@ -0,0 +1,18 @@
+
+var i = 0;
+
+
+function loadNextAudio() {
+
+  stim = stims[i];
+
+  //your code goes here
+
+  i = (i + 1) % stims.length;
+}
+
+
+
+$(document).ready(function() {
+  loadNextAudio();
+});
diff --git a/exercises/09_js_audio/js/jquery.js b/exercises/09_js_audio/js/jquery.js
diff --git a/exercises/09_js_audio/js/stims.js b/exercises/09_js_audio/js/stims.js
@@ -0,0 +1,6 @@
+var stims = [
+
+  {audio: "boogalooo", title: "Boogalooo"},
+  {audio: "flamingo", title: "Flamingo"},
+  {audio: "twist", title: "Twist"}
+]
diff --git a/solutions/09_js_audio/audio/boogalooo.mp3 b/solutions/09_js_audio/audio/boogalooo.mp3
diff --git a/solutions/09_js_audio/audio/boogalooo.ogg b/solutions/09_js_audio/audio/boogalooo.ogg
diff --git a/solutions/09_js_audio/audio/flamingo.mp3 b/solutions/09_js_audio/audio/flamingo.mp3
diff --git a/solutions/09_js_audio/audio/flamingo.ogg b/solutions/09_js_audio/audio/flamingo.ogg
diff --git a/solutions/09_js_audio/audio/twist.mp3 b/solutions/09_js_audio/audio/twist.mp3
diff --git a/solutions/09_js_audio/audio/twist.ogg b/solutions/09_js_audio/audio/twist.ogg
diff --git a/solutions/09_js_audio/js/functions.js b/solutions/09_js_audio/js/functions.js
@@ -0,0 +1,26 @@
+
+var i = 0;
+
+
+function loadNextAudio() {
+
+  stim = stims[i];
+
+  $("#audio-container").html(' \
+  <audio controls> \
+    <source src="audio/'+ stim.audio + '.ogg" type="audio/ogg"> \
+    <source src="audio/'+ stim.audio + '.mp3" type="audio/mpeg"> \
+  Your browser does not support the audio element. \
+  </audio> \
+  ');
+
+  $("#title").text(stim.title);
+
+  i = (i + 1) % stims.length;
+}
+
+
+
+$(document).ready(function() {
+  loadNextAudio();
+});
diff --git a/solutions/09_js_audio/js/jquery.js b/solutions/09_js_audio/js/jquery.js
diff --git a/solutions/09_js_audio/js/stims.js b/solutions/09_js_audio/js/stims.js
@@ -0,0 +1,6 @@
+var stims = [
+
+  {audio: "boogalooo", title: "Boogalooo"},
+  {audio: "flamingo", title: "Flamingo"},
+  {audio: "twist", title: "Twist"}
+]
diff --git a/solutions/09_js_audio/solution.html b/solutions/09_js_audio/solution.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Audio and Javscript</title>
+    <script src="js/jquery.js" charset="utf-8"></script>
+    <script src="js/stims.js" charset="utf-8"></script>
+    <script src="js/functions.js" charset="utf-8"></script>
+
+  </head>
+  <body>
+    <h1> Audio and Javascript</title>
+    <h3 id="title"></h3>
+    <div id="audio-container">
+
+    </div>
+
+    <p><input type="button" onclick="loadNextAudio();" value="Next"/>
+  </body>
+</html>