✔ Verschiedene Bilder anhand der Prozentauswertung anzeigen?

A

ArisTheDog

Grünschnabel
Hallo,

ich probiere seit einigen Tagen bei meinem Online Fragebogen bei der Auswertung ein Bild anzuzeigen:

Beispiel: Online-Fragebogen bestehend aus 51 Fragen (mit Radio-Buttons Ja/nein) Auswertung funktioniert und gibt auch gleich die Prozente der Richtigen an.

Jetzt würde ich gerne je nach Prozent noch ein Bild anzeigen lassen, dass heisst von der Auswertung 0-20% = Bild_A / 20-50% = Bild_B / 50-80% = Bild_C / 80-100% = Bild_D

Ich hoffe man versteht mein Anliegen ;)


Hier das JS:

Code: 
<script type="text/javascript">
		function auswerten(frage_nr) {
		var punkte = 0;
		var name = 'frage_';
		var pmax = 51;

		for (var i = 1; i <= pmax ; i++)if (check(name + i)) punkte++;

		document.getElementById('ausgabe').firstChild.data =
		'Sie haben '+ punkte +' von '+ pmax +
		' möglichen Punkten erreicht. Das sind '+ Math.round(punkte*100/pmax) +'  Prozent.';
}
		function check(frage) {
		for (var i = 0; obj = document.getElementsByName(frage)[i]; i++){
		if (obj.checked && obj.value === 'richtig') return true;
	}
	return false;
}
</script>

und hier der Quellcode der 2 letzten Fragen des Fragebogens:

Code: 
<tr>
				        <td width="630"><div align="left">4. Wurden die Massnahmen dokumentiert?</div></td>
				        <td width="35"><input type="radio" name="frage_50" value="richtig"></td>
				        <td width="35"><input type="radio" name="frage_50" value="falsch"></td>
			          </tr>
				      <tr>
				        <td width="630"><div align="left">5. Ist die Selbstinspektion protokolliert?</div></td>
				        <td width="35"><input type="radio" name="frage_51" value="richtig"></td>
				        <td width="35"><input type="radio" name="frage_51" value="falsch"></td>
			          </tr>
			        </table>
				    <div align="center"><br>
				      <input type="button" value="Auswerten" onclick="auswerten()" />
				      <input type="reset" name="return" id="return" value="Zurücksetzen">
			        </div>
			      </form>
                  <h1><b><div id="ausgabe">&nbsp;</div></b></h1>
			  </div>
              <div id="ausgabe_bild">&nbsp;</div></b></h1>
			  </div>

Besten Dank für eure Unterstützung!
 
Hallo und Herzlich Willkommen im Forum.
Du musst doch nur anstatt deiner Prozentausgabe ein Image anzeigen.
Ich würde das mit einer "switch/case" - bedingung implementieren.

zb:
Code: 
var ergebnis = Math.round(punkte*100/pmax);
var image = '';

switch(true){
    case (ergebnis <= 20) : image = 'BILD_A';
    break;
   
    case (ergebnis > 20 && ergebnis <= 50) : image = 'BILD_B';
    break;

    // usw...
}
document.getElementById('ausgabe').firstChild.data =
        'Sie haben '+ punkte +' von '+ pmax +
        ' möglichen Punkten erreicht. Das sind '+ergebnis +'  Prozent.' +
        ' <img src="'+image+'" alt="" />';

ungetestet!
 
Habs soeben mal probiert umzusetzen und es erscheint mir eigentlich auch als logisch, leider ohne Erfolg...

Ich beschäftige mich noch nicht all zu lange mit dieser Materie, wie man sicher auch merkt...
Aber ich denke ich verstehe den Vorgang fast. Wo wird die Bildquelle hinterlegt?
Muss ich das in der css datei machen?

aber ich glaube fast ich muss zuerst meine Fachwissen in diesem Bereich erweitern um das ganze dann auch sauber umsetzen zu können, bitte einfach sagen falls ich mich besser zuerst mehr einarbeiten soll...

Werde noch ein wenig weiterprobieren, aber mal Besten Dank für die schnelle Antwort!
 
Natürlich sollte man sich erst richtig einarbeiten bevor man sowas angeht.
Hier wird dir niemand fertige Scripte programmieren, wir geben nur Hilfestellung.

Wie sieht denn dein jetziger Code aus? Was funktioniert nicht?

Die Bilder müssen natürlich im Dateisystem liegen und der genaue Pfad muss im "<img>" - Tag angegeben sein.

zb:

Pfad:
images/BILD_A
imgaes/BILD_B
usw...

Code: 
// Hier die Ausgabe vom String mit der Auswertung... und das Image
' <img src="http://www.tutorials.de/images/'+image+'" alt="" /> '; // Ohne das http://www.tutorials.de/
 
Also,

da ich in Zukunft vermehrt mit js arbeiten darf, will ich das lernen und somit sowieso kein fertiges Script.
Und aller Anfang ist schwer, habe vor 4 Monaten im Eigenstudium mit passender Lektüre mit Websites angefangen und bin jetzt mit HTML durch... habe also noch viel vor.

Hier mein jetziges Script:
Code: 
<script type="text/javascript">
		function auswerten(frage_nr) {
		var punkte = 0;
		var name = 'frage_';
		var pmax = 51;
		var ergebnis = Math.round(punkte*100/pmax);
		var image = '';
		
	switch(true) {
		case (ergebnis <= 20) : image = 'bild_0_20.jpg';
		break;
		
		case (ergebnis > 20 && ergebnis <= 50) : image = 'bild_20_50.jpg';
		break;
		
		case (ergebnis > 50 && ergebnis <= 80) : image = 'bild_50_80.jpg';
		break;
		
		case (ergebnis > 80 && ergebnis <=100) : image = 'bild_80_100.jpg';
		break;
}
		for (var i = 1; i <= pmax ; i++)if (check(name + i)) punkte++;

		document.getElementById('ausgabe').firstChild.data =
		'Sie haben '+ punkte +' von '+ pmax +
		' möglichen Punkten erreicht. Das sind '+ergebnis +' Prozent.' + 
		' <img src="http://www.tutorials.de/images/'+image+'" alt="" />';
}
		function check(frage) {
		for (var i = 0; obj = document.getElementsByName(frage)[i]; i++){
		if (obj.checked && obj.value === 'richtig') return true;
	}
	return false;
}

</script>

Also die Textanzeige gibt jetzt wieder alles aus nur die Bilder werden als Text angezeigt
"Sie haben 0 von 51 möglichen Punkten erreicht. Das sind 0 Prozent. <img src="http://www.tutorials.de/images/bild_0_20.jpg" alt="" />"

Ich vermute ich habe den images Ordner falsch abgelegt...
Die Seite selbst liegt in einem separaten Ordner - muss der images Ordner in der Hauptordner der Website (http://www.deinewebsite.ch/images) oder in den separaten Ordner (http://www.deinewebsite.ch/checkliste/images)?

edit: mir gerade noch aufgefallen das zwar die erreichten Punkte angezeigt werden aber der Prozentsatz immer bei 0 bleibt.

Nochmals Besten Dank für deine Hilfe!

edit 2: habe leider das falsche script gepostet

hier das aktuelle:
Code: 
<script type="text/javascript">
		function auswerten(frage_nr) {
		var punkte = 0;
		var name = 'frage_';
		var pmax = 51;
		var ergebnis = Math.round(punkte*100/pmax);
		var image = '';
		
	switch(true) {
		case (ergebnis <= 20) : image = 'bild_0_20.jpg';
		break;
		
		case (ergebnis > 20 && ergebnis <= 50) : image = 'bild_20_50.jpg';
		break;
		
		case (ergebnis > 50 && ergebnis <= 80) : image = 'bild_50_80.jpg';
		break;
		
		case (ergebnis > 80 && ergebnis <=100) : image = 'bild_80_100.jpg';
		break;
}
		for (var i = 1; i <= pmax ; i++)if (check(name + i)) punkte++;

		document.getElementById('ausgabe').firstChild.data =
		'Sie haben '+ punkte +' von '+ pmax +
		' möglichen Punkten erreicht. Das sind '+ ergebnis +' Prozent.' + 
		' <img src="images/'+image+'" alt="" />';
}
		function check(frage) {
		for (var i = 0; obj = document.getElementsByName(frage)[i]; i++){
		if (obj.checked && obj.value === 'richtig') return true;
	}
	return false;
}

</script>

werde übers Wochenende nochmals hinter die Bücher - Übung macht den Meister ;)
 
Zuletzt bearbeitet:
Die "for-Schleife" muss erstens über das "switch" und vor die Ergebnisberechnung.
Noch dazu würde ich anstatt ".data" ".innerHtml" verwenden:

Code: 
<script type="text/javascript">
        function auswerten(frage_nr) {
        var punkte = 0;
        var name = 'frage_';
        var pmax = 51;

        for (var i = 1; i <= pmax ; i++)if (check(name + i)) punkte++;

        var ergebnis = Math.round(punkte*100/pmax);
        var image = '';
        
    switch(true) {
        case (ergebnis <= 20) : image = 'bild_0_20.jpg';
        break;
        
        case (ergebnis > 20 && ergebnis <= 50) : image = 'bild_20_50.jpg';
        break;
        
        case (ergebnis > 50 && ergebnis <= 80) : image = 'bild_50_80.jpg';
        break;
        
        case (ergebnis > 80 && ergebnis <=100) : image = 'bild_80_100.jpg';
        break;
}
       
 
        document.getElementById('ausgabe').firstChild.innerHTML =
        'Sie haben '+ punkte +' von '+ pmax +
        ' möglichen Punkten erreicht. Das sind '+ ergebnis +' Prozent.' + 
        ' <img src="images/'+image+'" alt="" />';
}
        function check(frage) {
        for (var i = 0; obj = document.getElementsByName(frage)[i]; i++){
        if (obj.checked && obj.value === 'richtig') return true;
    }
    return false;
}
 
</script>
 
Hallo Maniac,

habe mir mal ein paar Stunden Zeit genommen übers Wochenende um mich ein wenig zu schulen, aber dabei gemerkt das es dazu einfach mehr Zeit braucht mit meinem Wissenstand...
Aufgegeben habe ich natürlich nicht und weiterprobiert.

Das Problem mit der Positionierung konnte ich bereits selbst ausfindig machen und lösen - Die Befehle laufen nun korrekt und es gibt auch immer je nach Prozent die richtige Bild-Datei aus.

Aber.... leider wird das Bild nicht angezeigt... sondern nur der Text: z.B. <img src="images/bild_0_20.jpg" alt="" />

ich denke der Fehler liegt hier:
Code: 
document.getElementById('ausgabe').firstChild.data =..........

Laut meinem Lehrmittel wird bei der Eigenschaft .data nur Text ausgegeben also keine Bilder. Also habe ich es wie empfohlen mit der Eigenschaft .innerHTML probiert, wo die Anzeige komplett weg blieb. Mein Lehrmittel bestätigt dein Tipp aber leider funktionierts nicht.

Werde mich weiter durch das Lehrmittel ackern. Auf jeden Fall nochmals Besten Dank für deine Zeit und Geduld ;)
 
Für was nimmst du das "firstchild" ? geh doch direkt in das Element.
Code: 
document.getElementById('ausgabe').innerHTML =
        'Sie haben '+ punkte +' von '+ pmax +
        ' möglichen Punkten erreicht. Das sind '+ ergebnis +' Prozent.' + 
        ' <img src="images/'+image+'" alt="" />';
 
You made my day!

Danke für deine Hilfe, das wars.

Werde mich jetzt zuerst mehr einarbeiten bevor ich das nächste Projekt angehe!


Nochmals Besten Dank für deine Hilfe!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück