Can someone assist me with a script that activates an audio clip when five icons on a page are clicked? The image of the icons can be found below:
https://i.stack.imgur.com/mBC6o.png
Here is the HTML code:
<div class="slide overlay-container" id="inter8">
<div class="container content box-middle slide-back8">
<audio data-autoplay>
<source src="audio/mars_glm_intro_slide05a.mp3" type="audio/mp3">
</audio>
<div class="row zero">
<div class="top txt-ctr">
<div class="col-md-2 col-xs-2">
<img src="images/Icon.png" style="width:150px; height:93px;">
</div>
</div>
</div>
<!-- Icons and bars -->
<div class="row zero">
<div class="mdl txt-ctr hght txt-white">
<div class="col-md-2 col-xs-2 mar"></div>
<!-- Blue -->
<div class="col-md-2 col-xs-2 icn1 btn1" tabindex="1">
<img src="images/Icon1.png" style="width:150px; height:93px;">
</div>
<div class="col-md-2 col-xs-2 blu mar">
Recruit and<br>
Onboard<br>
current and<br>
future Associates
</div>
<!-- Green -->
<div class="col-md-2 col-xs-2 icn2 btn2" tabindex="1">
<img src="images/Icon2.png" style="width:150px; height:93px;">
</div>
<div class="col-md-2 col-xs-2 green mar">
Maximize<br>
Performance<br>
of Associates
</div>
<!-- Purple -->
<div class="col-md-2 col-xs-2 icn3 btn3" tabindex="1">
<img src="images/Icon3.png" style="width:150px; height:93px;">
</div>
<div class="col-md-2 col-xs-2 purple mar">
Engage<br>
Associates
</div>
<!-- Orange -->
<div class="col-md-2 col-xs-2 icn4 btn4" tabindex="1">
<img src="images/Icon4.png" style="width:150px; height:93px;">
</div>
<div class="col-md-2 col-xs-2 orange mar">
Develop<br>
Associates
</div>
<!-- Yellow -->
<div class="col-md-2 col-xs-2 icn5 btn5" tabindex="1">
<div class="play">
<img src="images/Icon5.png" style="width:150px; height:93px;">
</div>
</div>
<div class="col-md-2 col-xs-2 yellow mar">
All in the<br>
Mars Way
</div>
</div>
</div>
<div class="row page8-btm zero">
<div class="btm">
<h2>What is Great Line Management?</h2>
<p>Click the icons to learn more.</p>
</div>
</div>
</div>
</div>
Below is the JavaScript code for the script:
var click1 = false;
var click2 = false;
var click3 = false;
var click4 = false;
var click5 = false;
$('.btnClass').click(checkProg);
function checkProg(){
var thisBtn = $(this).attr('id');
if(thisBtn == "btn1") {
click1 = true;
} else if (thisBtn == "btn2") {
click2 = true;
} else if (thisBtn == "btn3") {
click3 = true;
} else if (thisBtn == "btn4") {
click4 = true;
} else if (thisBtn == "btn5") {
click5 = true;
}
if(click1 == true && click2 == true && click3 == true && click4 == true && click5 == true) {
'audio/mars_glm_intro_slide05b.mp3'
}
}
I'm not receiving any errors from the script, but it's not functioning as expected. Any assistance would be greatly appreciated.