Javascript + JQuery Progressbar value mehrfach durch if reduzieren

Snarkoon · 29. August 2013

Hallo Leute,

ich hab ein Problem und zwar entwickel ich gemeinsam mit einem Kollegen ein Lernspiel für Kinder als Projektarbeit. Wir haben jedoch folgendes Problem:

Wir möchten durch verschiedene Matheaufgaben von einer Progressbar ( bei uns Lebensanzeige) immer 20 Punkte abziehen.
Jedoch klappt dies nur bei der ersten Matheaufgabe, wenn man die zweite Richtig löst verringert sich der Wert der Progressbar nicht erneut.

Hier der code:

Code:

<script type="text/javascript">
leben = 100;
gegnerleben = 100;
</script>

<script type="text/javascript">
var aufgabe_eins = new Array("aufgabe1eins","aufgabe1zwei","aufgabe1drei");
var aufgabe_zwei = new Array("aufgabe2eins","aufgabe2zwei","aufgabe2drei");
var aufgabe_drei = new Array("aufgabe3eins","aufgabe3zwei","aufgabe3drei");
var aufgabe_vier = new Array("aufgabe4eins","aufgabe4zwei","aufgabe4drei");
var aufgabe_fuenf = new Array("aufgabe5eins","aufgabe5zwei","aufgabe5drei");
var aufgabe_sechs = new Array("aufgabe6eins","aufgabe6zwei","aufgabe6drei");
var aufgabe_sieben = new Array("aufgabe7eins","aufgabe7zwei","aufgabe7drei");
var aufgabe_acht = new Array("aufgabe8eins","aufgabe8zwei","aufgabe8drei");
var aufgabe_neun = new Array("aufgabe9eins","aufgabe9zwei","aufgabe9drei");

var loesung_eins = new Array("10","10","10");
var loesung_zwei = new Array("13","15","9");
var loesung_drei = new Array("17","19","18");
var loesung_vier = new Array("6","6","17");
var loesung_fuenf = new Array("30","38","31");
var loesung_sechs = new Array("50","25","36");
var loesung_sieben = new Array("53","29","10");
var loesung_acht = new Array("52","14","39");
var loesung_neun = new Array("36","21","60");

var zzahl = Math.round(Math.random()*2);
var zzahl2 = Math.round(Math.random()*2);
var zzahl3 = Math.round(Math.random()*2);
var zzahl4 = Math.round(Math.random()*2);
var zzahl5 = Math.round(Math.random()*2);
var zzahl6 = Math.round(Math.random()*2);
var zzahl7 = Math.round(Math.random()*2);
var zzahl8 = Math.round(Math.random()*2);
var zzahl9 = Math.round(Math.random()*2);



form1.eingabe.focus();

</script>

</head>

<body onLoad="document.forms['form1'].elements['eingabe'].focus();">

<div id="kampfbg"><img src="area1.jpg" alt="kampfbg" height="570" width="1000" border="0" /> 
 <form name="form1" action="javascript:aufgabe1()" id="formId">
<div id="formular"> <input type="text" name="eingabe" id="eingabeform" size="1" maxlength="3" style="font-family: Verdana; font-size: 50px"> </div>
<div id="ok"> <input type="button" id="button1" style="padding: 18px; font-family: Verdana; font-size: 18px" value="OK" onClick=aufgabe1();> </div>
 
</form>

<div id ="aufgabe"><img src="start.png" id="start1" alt="" height="60" width="250" border="0" /></div>

<div id="gegner"></div>
<div id="pokemon"></div>
<div id="anzeige">
 <div id="lebensbalken"></div>
 <div id="name"></div>
 <div id="pokemon-title"></div>
 <div id="level">Level:</div>
 <div id="lebenspunkte"><label id="label3" class="white"></label>/<label id="label4" class="white">100</label> LP</div>
 <div id="aufgabe-text">Löse die Aufgaben um deinen Gegner zu besiegen.</div>
 <div id="lebentitle">Lebenspunkte:</div>



</div>
<div id="gegner-anzeige"></div>
 <div id="gegner-lebensbalken"></div>
 <div id="gegner-name"></div>
 <div id="gegner-level">Level:</div>
 <div id="gegner-lebenspunkte"><label id="label3" class="white"></label>/<label id="label4" class="white">100</label> LP</div>
 <div id="gegner-aufgabe-text">Besiege Deinen Gegner!</div>
 <div id="gegner-lebentitle">Lebenspunkte:</div>
 


</div>

 <script>
 
 $(function() {
 $( "#gegner-lebensbalken" ).progressbar({
 value: gegnerleben 
 });
 });
 
</script>

<script>

 $(function() {
 $( "#lebensbalken" ).progressbar({
 value: leben 
 });
 });
 
</script>

<script type="text/javascript">
 
var aufg = aufgabe_eins[zzahl];

var pic1 = document.getElementById("start1");
pic1.src=aufg+".png";


// Aufgabe 1

function aufgabe1(){



var element = null; 
element = document.getElementById("eingabeform"); 



if (element.value==loesung_eins[zzahl]){ 



var aufg1 = document.getElementById("start1");
aufg1.src="richtig.png"; 
gegnerleben-20;
$( "#gegner-lebensbalken" ).progressbar({
 value: gegnerleben
});


document.form1.reset()

document.getElementById("button1").onclick = weiter;

window.setTimeout("weiter()", 1000);

}



else{


var aufg1 = document.getElementById("start1");
aufg1.src="falsch.png";
leben-20;

 $( "#lebensbalken" ).progressbar({
 value: leben

 });

document.form1.reset()

document.getElementById("button1").onclick = weiter;

window.setTimeout("weiter()", 1000);

}
} 



function weiter(){


var aufg = aufgabe_zwei[zzahl2]; 

var aufg2 = document.getElementById("start1");
aufg2.src=aufg+".png";


document.getElementById("button1").onclick = aufgabe2;
document.getElementById("formId").action="javascript:aufgabe2()";

document.forms['form1'].elements['eingabe'].focus();

}

// Aufgabe 2

function aufgabe2(){

var element = null; 
element = document.getElementById("eingabeform"); 



if (element.value==loesung_zwei[zzahl2]){ 

var aufg2 = document.getElementById("start1");
aufg2.src="richtig.png";



 $( "#gegner-lebensbalken" ).progressbar({
 value: gegnerleben-20

 });

document.form1.reset()

document.getElementById("button1").onclick = weiter2;

window.setTimeout("weiter2()", 1000);


}



else{

var aufg2 = document.getElementById("start1");
aufg2.src="falsch.png";

 $( "#lebensbalken" ).progressbar({
 value: leben-20

 });


document.form1.reset()

document.getElementById("button1").onclick = weiter2;

window.setTimeout("weiter2()", 1000);

}

Hoffe Ihr steigt dort durch! Ansonsten fragt mich einfach, wäre echt super wenn wir hilfe bekämen!

Danke euch im Vorraus!

Anzeige

Nanobyte · 29. August 2013

AW: Javascript + JQuery Progressbar value mehrfach durch if reduzieren

Wenn du folgendes schreibst:

Code:

leben-20

dann wird das Ergebnis direkt zurückgegeben.

Du musst das Ergebnis in die Variable zurückgeben damit du damit weiterarbeiten kannst:

Code:

leben = leben-20

Snarkoon · 31. August 2013

AW: Javascript + JQuery Progressbar value mehrfach durch if reduzieren

Danke Nanobyte!

Das hat geholfen, ist mir garnicht aufgefallen.

Vielen Dank!

Nützliche Suchen

Javascript + JQuery Progressbar value mehrfach durch if reduzieren

Videos zum Themenbereich