What have I done wrong? The functions with the if-else will not activate. I am doing a digital story with videos and sound. Throughout the story, the user has to choose between two buttons, one wrong and one correct, in order to continue with the story.
This is the coding:(it is on norwegian)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="forside">
<img id="forsideBilde" src="forsideBilde.jpg">
<span id="teksten" id="txtVelkommen">Velkommen</span>
<button id="startKnapp">START FORTELLINGEN</button>
<audio id="lydVelkommen" src="lydVelkommen.mp3"></audio>
</div>
<div id="innledning">
<video id="filmInnledning" src = "filmInnledning.mp4" height=100%></video>
<audio id ="lydInnledning" src = "lydInnledning.mp3"></audio>
<button id="videreKnapp">Gå videre</button>
</div>
<div id="side1">
<video id="filmSkog" src = "filmSkog.mp4" height=100%></video>
<audio id ="lydSkog" src = "lydSkog.mp3"></audio>
<button id="elgKnapp">Stol på elgen</button>
<button id="aleneKnapp">Gå alene</button>
</div>
<div id="side2">
<video id="filmHav" src = "filmHav.mp4" height=100%></video>
<audio id ="lydHav" src = "lydHav.mp3"></audio>
<button id="svomKnapp">Svøm selv</button>
<button id="batKnapp">Ta båten</button>
</div>
<div id="side3">
<video id="filmHus" src = "filmHus.mp4" height=100%></video>
<audio id ="lydHus" src = "lydHus.mp3"></audio>
<button id="høyreKnapp">Høyre</button>
<button id="venstreKnapp">Venstre</button>
</div>
<div id="fail">
<img id="failBilde" src="failBilde.jpg">
<span id="failTeksten" id="txtFail">Beklager, du klarte det ikke!</span>
<button id="restartKnapp">PRØV IGJEN</button>
<audio id="lydSkogfail" src="lydSkogfail.mp3"></audio>
<audio id="lydHavfail" src="lydHavfail.mp3"></audio>
<audio id="lydHusfail" src="lydHusfail.mp3"></audio>
</div>
<div id="ferdig">
<img id="ferdigBilde" src="ferdigBilde.jpg">
<span id="ferdigTeksten" id="txtFerdig">Gratulerer, du klarte det!</span>
<button id="restartKnapp">SPILL IGJEN</button>
<audio id="lydFerdig" src="lydFerdig.mp3"></audio>
</div>
<script>
var forside = document.getElementById("forside");
var forsideBilde = document.getElementById("forsideBilde");
var startKnapp = document.getElementById("startKnapp");
var lydVelkommen = document.getElementById("lydVelkommen");
var innledning = document.getElementById("innledning");
var filmInnledning = document.getElementById("filmInnledning");
var lydInnledning = document.getElementById("lydInnledning");
var videreKnapp = document.getElementById("videreKnapp");
var side1 = document.getElementById("side1");
var filmSkog = document.getElementById("filmSkog");
var lydSkog = document.getElementById("lydSkog");
var elgKnapp = document.getElementById("elgKnapp");
var aleneKnapp = document.getElementById("aleneKnapp");
var side2 = document.getElementById("side2");
var filmHav = document.getElementById("filmHav");
var lydHav = document.getElementById("lydHav");
var svomKnapp = document.getElementById("svomKnapp");
var batKnapp = document.getElementById("batKnapp");
var side3 = document.getElementById("side3");
var filmHus = document.getElementById("filmHus");
var lydHus = document.getElementById("lydHus");
var høyreKnapp = document.getElementById("høyreKnapp");
var venstreKnapp = document.getElementById("venstreKnapp");
var fail = document.getElementById("fail");
var failBilde = document.getElementById("failBilde");
var failTeksten = document.getElementById("failTeksten");
var restartKnapp = document.getElementById("restartKnapp");
var lydSkogfail = document.getElementById("lydSkogfail");
var lydHavfail = document.getElementById("lydHavfail");
var lydHusfail = document.getElementById("lydHusfail");
var ferdig = document.getElementById("ferdig");
var ferdigBilde = document.getElementById("ferdigBilde");
var ferdigTeksten = document.getElementById("ferdigTeksten");
var lydFerdig = document.getElementById("lydFerdig");
forside.style.display = "inline";
innledning.style.display = "none";
side1.style.display = "none";
side2.style.display = "none";
side3.style.display = "none";
fail.style.display = "none";
ferdig.style.display = "none";
lydVelkommen.volume = 1;
startKnapp.onclick = function(){
forside.style.display = "none";
innledning.style.display = "inline";
lydVelkommen.volume = 0;
filmInnledning.play();
lydInnledning.play();
}
videreKnapp.onclick = function(){
innledning.style.display = "none";
filmInnledning.pause();
lydInnledning.pause();
side1.style.display = "inline";
filmSkog.play();
lydSkog.play();
}
function Valg1 () {
if(elgKnapp.clicked == true){
side1.style.display = "none";
side2.style.display = "inline";
filmHav.play();
lydHav.play();
}
else if(aleneKnapp.clicked == true){
side1.style.display = "none";
fail.style.display = "inline";
}
else{
document.write="Noe gikk galt. Prøv igjen."
}
}
Valg1();
function Valg2 () {
if(svomKnapp.clicked == true){
side2.style.display = "none";
side3.style.display = "inline";
filmHus.play();
lydHus.play();
}
else if(batKnapp.clicked == true){
side2.style.display = "none";
fail.style.display = "inline";
}
else{
document.write="Noe gikk galt. Prøv igjen."
}
}
Valg2 ();
function Valg3 () {
if(venstreKnapp.clicked == true){
side3.style.display = "none";
ferdig.style.display = "none";
}
else if(høyreKnapp.clicked == true){
side3.style.display = "none";
fail.style.display = "inline";
}
else{
document.write="Noe gikk galt. Prøv igjen."
}
}
Valg3 ();
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire