• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] MultipleChoice, mit Bilder Anzeige und Endauswertung mit Bildvervollständigung

H

Hoffy1988

New member
Hi Ihr,
ich bin immer noch recht grün hinter den Ohren was JavaScript angeht.

ich hätte gerne mal einen Denkanstoß, nicht gleich einen Kompletten code (falls Ihr doch schon einen kompletten Code dafür habt könnt Ihr diesen gerne posten, aber bitte erstmal in einem spoiler, weil ich erstmal selber versuchen will zum Ergebnis zu kommen.

Ich will/soll folgendes erstellen:

Es soll eine Art Umfrage werden, mit 6 Fragen und je 6 Antworten von 1-6. Jeder dieser Auswahlmöglichkeiten vergibt je nach Wert die Punktzahlen 1-6.
Wenn ich bei Frage 1 die Möglichkeit 5 Auswähle vergebe ich 5 Punkte, gleichzeitig erscheint an einer bestimmten Position ein Bild, welches sich entsprechend der Auswahlmöglichkeit ändert, also wenn ich zb bei Frage 1 5 Auswähle erscheint zb Bild1e.jpg in dem Bildbereich.
Das ganze soll für alle Auswahlmöglichkeiten der 6 Fragen gleich ablaufen.

wenn ich dann alle 6 Fragen beantwortet habe, soll ich auf einen Button Auswerten klicken können, und dann soll aus allen Möglichkeiten eine Art Durchschnitt erstellt werden, welches dann am Ende das entsprechende Durchschnittsbild Komplett erscheinen lässt.

Also nochmal ganz kurz beschrieben:
Eine Umfrage mit 6Fragen und je 6 Antworten. Je nach ausgewählter Antwort erscheint an eine bestimmten Position ein Teil des Gesamtbildes, aber Antwortspezifisch, so dass ich während der Auswahl ein wirres Bild habe.
Klicke ich dann am Ende auf Auswerten, so ändert sich das Gesamtbild, in ein Durchschnittsbild, wenn also der Durchschnitt 5 sein sollte, soll nach der Auswertung Bild5 komplett erscheinen und nicht aus verschiedenen Schnipseln der entsprechenden Antworten bestehen.

So ich hoffe das war verständlich ausgedrückt.

-Wie gehe ich am besten vor?
-Was für Abfragen brauche ich (if-else??)?
-Was benutze ich am besten für die Auswahlmöglichkeiten? ich nehme mal ganz stark an dass sich radiobuttons dafür am besten eignen?

Ich denke das ist recht leicht umzusetzen, aber ich habe bis jetzt keine Ahnung wo ich anfangen soll.

Ich bitte mal um ein bisschen Unterstützung und um Denkanstösse.
 
Als Ausgangspunkt könntest du dieses Quiz nehmen, was ich mal in einem anderen Thread gefunden habe:
Multiple-Choice-Quiz
Ist etwas anfechtbar, weil der Code mit document.write erzeugt wird ;-)
Wäre eine dankbare Aufgabe, es auf PHP umzustellen.
 
Hi Ihr,

ich hab jetzt ein wenig gebastelt, und bin bei folgender Lösung, diese funktioniert aber nicht...
geht mein Ansatz in die richtige Richtung?? im JS bei den Variablen sind immer grosse Buchstaben also nicht 0L sondern ein grosses "o"und L usw

die values von den radio buttons werden sich noch ändern die stehen nur zum testen auf 1a usw

HTML
Code: 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link type="text/javascript" href="js/change.js">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

<body>
	<div id="wrapper">
		<form method="get" action="http://imageart.de">
			<ul class="fragen">
				<li class="frage">
					<label class="label_frage">Frage 1</label><br/>
						<input type="radio" class="radio1" id="1a" name="nameradio" value="1a"/><label class="label_antwort" for="radio_1">1</label>
						<input type="radio" class="radio1" id="1b" name="nameradio" value="1b"/><label class="label_antwort" for="radio_2">2</label>
						<input type="radio" class="radio1" id="1c" name="nameradio" value="1c"/><label class="label_antwort" for="radio_3">3</label>
						<input type="radio" class="radio1" id="1d" name="nameradio" value="1d"/><label class="label_antwort" for="radio_4">4</label>
						<input type="radio" class="radio1" id="1e" name="nameradio" value="1e"/><label class="label_antwort" for="radio_5">5</label>
						<input type="radio" class="radio1" id="1f" name="nameradio" value="1f"/><label class="label_antwort" for="radio_6">6</label>
					<input type="button" value="Check" onclick="change_OL()">		
				</li>
			</ul>
		</form>
		<div id="bildrahmen">
			<img class="sectionbild" id="section1" alt="" />
			<img class="sectionbild" id="section2" alt="" />
			<img class="sectionbild" id="section3" alt="" />
			<img class="sectionbild" id="section4" alt="" />
			<img class="sectionbild" id="section5" alt="" />
			<img class="sectionbild" id="section6" alt="" />
		</div>
	</div>
</body>
</html>

js
Code: 
// JavaScript Document

var OL = ''
var OR = ''
var ML = ''
var MR = ''
var UL = ''
var UR = ''
var bp = "../Zutaten/bildschnipsel/bildschnipsel_"
var be =".jpg"
var s1 = document.getElementById('section1')

/*
	function change_OL(){
		if (document.getElementById('1a').checked) {
  OL = document.getElementById('1a').value;
}
*/
function change_OL(){
	if (document.getElementById('1a').checked) {
		OL = document.getElementById('1a').value;
	}
	else if (document.getElementById('1b').checked) {
		OL = document.getElementById('1b').value;
	}
	else if (document.getElementById('1c').checked) {
		OL = document.getElementById('1c').value;
	}
	else if (document.getElementById('1d').checked) {
		OL = document.getElementById('1d').value;
	}
	else if (document.getElementById('1e').checked) {
		OL = document.getElementById('1e').value;
	}
	else if (document.getElementById('1f').checked) {
		OL = document.getElementById('1f').value;
	}
	//s1.style.backgroundImage = 'url('+bildpfad+OL+bildendung+')';
	s1.style.backgroundImage = 'url('+bp+OL+be+')';
}

css
Code: 
@charset "UTF-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
	color:rgba(0,0,0,1);
	font-family:Helvetica, Arial, sans-serif;
	font-size:1em;
	font-weight:400;
	text-decoration:none;
}

#wrapper	{
	margin:0 auto;
	width:800px;
	min-height:50px;
	background:rgba(255,255,0,1);
}

/*BildRahmen*/
#bildrahmen {
	width: 60px;
	height: 90px;
}
.sectionbild {
	width: 30px;
	height: 30px;
	float: left;
}
#section1 {
	background-color: rgba(255,0,0,1.00);
	background-Image: url(../Zutaten/bildschnipsel/bildschnipsel_leer.jpg);
}
#section2 {
	background-color: rgba(0,255,0,1.00);
	background-image: url(../Zutaten/bildschnipsel/bildschnipsel_leer.jpg);
}
#section3 {
	background-color: rgba(0,0,255,1.00);
	background-image: url(../Zutaten/bildschnipsel/bildschnipsel_leer.jpg);
}
#section4 {
	background-color: rgba(255,255,0,1.00);
	background-image: url(../Zutaten/bildschnipsel/bildschnipsel_leer.jpg);
}
#section5 {
	background-color: rgba(255,0,255,1.00);
	background-image: url(../Zutaten/bildschnipsel/bildschnipsel_leer.jpg);
}
#section6 {
	background-color: rgba(0,255,255,1.00);
	background-image: url(../Zutaten/bildschnipsel/bildschnipsel_leer.jpg);
}
 
Zuletzt bearbeitet:
Schade, dass Du meinen Vorschlag ignorierst. So eine Aufgabe schreit geradezu danach, die Daten in Strukturen abzulegen und die Elemente und die Auswertung daraus zu generieren! Wenn es dir zu einfach ist, etwas fertiges zu verwenden, hättest Du ja die Generierung neu in PHP schreiben können oder mit den Javascript-Funktionen für DOM-Elemente zu generieren.
 
Zuletzt bearbeitet:
Nein ich habe Deinen Vorschlag nicht ignoriert, ich hab mir das angeschaut, aber PHP kann ich leider nicht. :(
Wie schon gesagt es ging mir um eine JavaScript Lösung.
und in der Zeit bis ich geantwortet habe, war ich im Test- und Ausprobierwahn
und habe deine Antwort erst gelesen nachdem ich meine erste Lösung gepostet habe.

Vielleicht sollte ich dann doch lieber nicht mit JavaScript weitermachen wenn ich schon bei
dieser "einfachen" Umsetzung noch nicht so schnell und einfach durchsteige.

Klar verstehe ich, dass das mit den Arrays eigentlich schon ne gute Lösung ist.
aber ich steige noch nicht dahinter, wie die eigentliche Funktion aufgebaut ist.
Da brauche ich wohl noch ein paar Stunden mehr mit JS. ;)

Aber ich blicke da zumindest schon etwa die Hälfte von der function.js.
Ich bin da aber immer noch dran.
 
Zuletzt bearbeitet:
in der Zeit bis ich geantwortet habe, war ich im Test- und Ausprobierwahn
und habe deine Antwort erst gelesen nachdem ich meine erste Lösung gepostet habe.
Zum Vergrößern anklicken....
Ahso, das erklärt es natürlich.
Wenn Du mit deiner einfachen Lösung Probleme hast, dann versuche doch mal, mein Skript an deine Anforderungen anzupassen. Was ist dir denn dabei unklar?
Wenn Du damit fertig bist und noch eine Herausforderung suchst, kannst Du es ja mit Javascript umstellen:
Sempervivum schrieb:
oder mit den Javascript-Funktionen für DOM-Elemente zu generieren.
Zum Vergrößern anklicken....
 
das was mir am unklarsten ist,
(liegt wohl an PHP) warum bei mir beim lokalen ausführen in der html datei nur das Skript steht,
und bei dem online script die ganzen arrays als tags definiert sind und eben auch im quellcode stehen.

das macht mir am meisten sorgen, denn so kann ich ja nicht effektiv selber lokal testen und eben wenn ich anpasse nicht direkt meine Fehler sehe :(
dass die tags dynamisch durch js erstellt werden, und auch in die einzelnen untersektionen unterteilt werden, habe ich auch verstanden.

wo ich noch versuche durchzusteigen ist, wie/was ich genau ändern müsste, um die Auswahl bei array 1 also das Ergebnis (was ja bei mir am ende dann 6 fragen sind) so ausgeben lasse, dass diese alle in einem div stehen mit den entsprechenden Positionen der entsprechenden Auswahl.

also quasi: Frage1 Auswahl 1 im div ergebnis in section1, wobei der div Ergebnis in 6 Sektionen für die einzelnen fragen unterteilt ist.

Code: 
function showResult(questionId) {
  if(answers[questionId] == useranswers[questionId]) {
    document.getElementById('result_' + questionId).innerHTML = '<img src="correct.gif" style="border:0" alt="Correct!" />';
  } else {
    document.getElementById('result_' + questionId).innerHTML = '<img src="incorrect.gif" style="border:0" alt="Incorrect!" />';
  }
}

dafür müsste ich ja entsprechend diese function entsprechend abändern und als allerletztes ablaufen lassen.
da bin ich grad am basteln und probieren ob ich das hinbekomme.
das müsste ich dann ja theoretisch mit einer for schleife ablaufen lassen und die Ergebnisse der arrays abfragen.

da bin ich mir noch nicht sicher wie ich das entsprechend umsetze, am besten wäre es wenn die Bilder dann am ende bildschnipsel11.jpg heissen.
ich glaube soweit habe ich das durchblickt.

wäre da for schleife sinnvoll? oder eher lieber einzeln schreiben?
was denkst du persönlich über CASE-abfrage? in dem fall sinnvoll?

wie du merkst hab ich mich schon mit der materie ein wenig befasst stehe aber in der Umsetzung noch Anfang ^^

dann müsste der dann einen tag mit etwa folgendem Befehl schreiben:



Code: 
var bp="Zutaten/bildschnipsel/bildschnipsel"
var be=".jpg"

document.writeln('<div id="Ergebnis">'); (für das Ergebnis div)
document.writeln('<img id=section1 class="sectionbild" alt="" />'); (das für die 6 teilbieder)
document.wirteln('</div>'); (wenn alle 6 teilbilder eingesetzt sind)

Mal schauen ob ich das schaffe, aber ich bin mal optimistisch.
Aber für Hilfestellungen bin ich dankbar.
 
Dass die Datei die Endung "php" hat, ist nur Zufall, der Code ist reines Javascript.
warum bei mir beim lokalen ausführen in der html datei nur das Skript steht,
und bei dem online script die ganzen arrays als tags definiert sind und eben auch im quellcode stehen.
Zum Vergrößern anklicken....
Das kann ich nicht nachvollziehen. Ich kann das Quiz sowohl lokal als auch auf meinem Webspace einwandfrei aufrufen. Hast Du vielleicht Javascript deaktiviert?
 
nein hab ich nicht.
das script läuft auch einwandfrei,
mir wird halt nur leider der generierte quellcode nicht angezeigt :(
 
Ach so, ja, das ist leider so, dass bei document.write() der generierte Quellcode nicht sichtbar ist. Auch in der HTML-Ansicht von Firebug wird er leider nicht angezeigt. Man muss ihn sich aus den Anweisungen erschließen. Anders ist es bei PHP, dort ist der Quelltext im Browser sichtbar. Ebenso wenn man die Funktionen zum Zugriff auf DOM-Elemente verwendet, dann ist der Quelltext in der HTML-Ansicht von Firebug sichtbar. Auch ein Grund, document.write() nicht zu verwenden.
 
Ha, ich hab doch ne Möglichkeit gefunden wie man den generierten Quellcode einsehen kann :D

Wenn man bei Safari die Entwickler Elemente benutzt, kann man auch die Seite untersuchen.
jedoch gibt es 2 unterschiedliche "Methoden"

"Seitenquelltext einblenden" dort wird dann der Quelltest eingeblendet, also quasi der "Rohstil"
"Element untersuchen" wird zwar auch der Quelltest eingeblendet, jedoch aber nach der Generierung mit JavaScript, somit hab ich dann doch den generierten Quellcode

:) so nun gehts ans probieren und failen ^^
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben