Jump to content

mtsgill

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

mtsgill's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. mtsgill
    Hi Guys! I am kinda stuck on this code. I am trying to set individual setTimeout for all of my buttons to appear on video clips. But I only managed to appear the first two buttons after 13 seconds. How can I do the same for all others? I was unable to do so that's why I had to do the style.visibility="visible" within the other functions just to make sure buttons appear after execution of one function. If I follow the same setTimeout I did for button1 and button2 for other buttons, It doesnt work in a right way. I am very confused and frustrated. PLEASE HELP!!! Is there another way of doing this? Here is my full code: <!DOCTYPE html><html><head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Welcome to Interactive Narrative Media Project - by Fokrul Islam </title> <script> // 13 seconds delay for left button to appear on video function showLeft() { document.getElementById("button1").style.visibility = "visible"; } setTimeout("showLeft()", 13000); // 13 seconds delay for right button to appear on video function showRight() { document.getElementById("button2").style.visibility = "visible"; } setTimeout("showRight ()", 13000); //link to left choice video once left button is pressed and button gets cleared from the video frame at the same time //gives options to pick a bike or no bike on screen function turnLeft() { document.getElementById("button1").style.visibility="hidden"; document.getElementById("button2").style.visibility="hidden"; document.getElementById("mp4_src").src="video2.m4v"; document.getElementById("video1").load(); document.getElementById("button5").style.visibility="visible"; document.getElementById("button6").style.visibility="visible"; } //character picks up a bike function pickBike() { document.getElementById("button5").style.visibility="hidden"; document.getElementById("button6").style.visibility="hidden"; document.getElementById("mp4_src").src="video8.m4v"; document.getElementById("video1").load(); document.getElementById("button9").style.visibility="visible"; document.getElementById("button10").style.visibility="visible"; } //character decides not to take a bike function noBike() { document.getElementById("button5").style.visibility="hidden"; document.getElementById("button6").style.visibility="hidden"; document.getElementById("mp4_src").src="video9.m4v"; document.getElementById("video1").load(); document.getElementById("button11").style.visibility="visible"; document.getElementById("button12").style.visibility="visible"; } //link to right choice video once right button is pressed and button gets cleared from the video frame at the same time //gives options to push the gate or jump the gate function turnRight() { document.getElementById("button2").style.visibility="hidden"; document.getElementById("button1").style.visibility="hidden"; document.getElementById("mp4_src").src="video3.m4v"; document.getElementById("video1").load(); document.getElementById("button3").style.visibility="visible"; document.getElementById("button4").style.visibility="visible"; } //character jumps the gate function jumpGate() { document.getElementById("button3").style.visibility="hidden"; document.getElementById("button4").style.visibility="hidden"; document.getElementById("mp4_src").src="video5.m4v"; document.getElementById("video1").load(); document.getElementById("button7").style.visibility="visible"; document.getElementById("button8").style.visibility="visible"; } //character pushes the gate function pushGate() { document.getElementById("button3").style.visibility="hidden"; document.getElementById("button4").style.visibility="hidden"; document.getElementById("mp4_src").src="video4.m4v"; document.getElementById("video1").load(); document.getElementById("button7").style.visibility="visible"; document.getElementById("button8").style.visibility="visible"; } //character fights back function fightBack() { document.getElementById("button7").style.visibility="hidden"; document.getElementById("button8").style.visibility="hidden"; document.getElementById("mp4_src").src="video6.m4v"; document.getElementById("video1").load(); } //character runs away function noFight() { document.getElementById("button7").style.visibility="hidden"; document.getElementById("button8").style.visibility="hidden"; document.getElementById("mp4_src").src="video7.m4v"; document.getElementById("video1").load(); } //character drinks water function drinkWater() { document.getElementById("button9").style.visibility="hidden"; document.getElementById("button10").style.visibility="hidden"; document.getElementById("mp4_src").src="video10.m4v"; document.getElementById("video1").load(); } //character doesnt drink water function noWater() { document.getElementById("button9").style.visibility="hidden"; document.getElementById("button10").style.visibility="hidden"; document.getElementById("mp4_src").src="video11.m4v"; document.getElementById("video1").load(); } //character goes left function goLeft() { document.getElementById("button11").style.visibility="hidden"; document.getElementById("button12").style.visibility="hidden"; document.getElementById("mp4_src").src="video13.m4v"; document.getElementById("video1").load(); } //character goes right function goRight() { document.getElementById("button11").style.visibility="hidden"; document.getElementById("button12").style.visibility="hidden"; document.getElementById("mp4_src").src="video12.m4v"; document.getElementById("video1").load(); } </script> </head><body> <div id="header"> <h2>Interactive Narrative Media</h3> </div> <div id="left"> <!--Two buttons are defined here--> <button onclick="turnLeft()" id="button1" style="position: absolute; left: 55px; top: 473px; height: 33px;">Turn Left</button> <button onclick="turnRight()" id="button2" style="position: absolute; left: 465px; top: 473px; height: 33px;">Turn Right</button> <button onclick="jumpGate()" id="button3" style="position: absolute; left: 55px; top: 473px; height: 33px;">Jump Gate</button> <button onclick="pushGate()" id="button4" style="position: absolute; left: 465px; top: 473px; height: 33px;">Push Gate</button> <button onclick="pickBike()" id="button5" style="position: absolute; left: 55px; top: 473px; height: 33px;">Pick a Bike</button> <button onclick="noBike()" id="button6" style="position: absolute; left: 465px; top: 473px; height: 33px;">No Bike</button> <button onclick="goRight()" id="button12" style="position: absolute; left: 465px; top: 473px; height: 33px;">Go Right</button> <button onclick="goLeft()" id="button11" style="position: absolute; left:55px; top: 473px; height: 33px;">Go Left</button> <button onclick="fightBack()" id="button7" style="position: absolute; left: 55px; top: 473px; height: 33px;">Fight Back</button> <button onclick="noFight()" id="button8" style="position: absolute; left: 465px; top: 473px; height: 33px;">Run Away</button> <button onclick="drinkWater()" id="button9" style="position: absolute; left: 55px; top: 473px; height: 33px;">Drink Water</button> <button onclick="noWater()" id="button10" style="position: absolute; left: 465px; top: 473px; height: 33px;">No Water</button> <br> <!--First video on page load is defined here and set to autoplay with customised dimensions--> <video id="video1" controls="controls" autoplay="autoplay" width="591" height="440"> <source id="mp4_src" src="video1.m4v" type="video/mp4"> </video> <br> </div> <div id="right"> <h2 class="contents_head">Main Objective!</h2> <p class="my-style">The aim of the video is to guide the Character home safely. Your job will be to successfully select the correct options displayed to you. At certain points in the video, the Character would need to make choices depending on his situations. Your job is to select the options which would get him home safely. If you select the wrong option, they you must RESTART the video! </div> <!-- This div footer is used to create a nice bordered footer at the bottom of the page--> <div id="footer" style="left: 1px; bottom: -37px"> <br> </div></body></html>
×
×
  • Create New...