Quiz in JavaScript für mehrere Leute - Wie genau umsetzen?

MisterM · 27 Juni 2015

Hallo liebe Forengemeinde,

nach langer Funkstille melde ich mich mal wieder, dafür gleich mit einem anliegen..

Ich muss im Rahmen eines Projekts eine kleine webapp schreiben, da soll es nun eine Art Fragebogen/Quiz geben.

Folgendes Konzept: Es gibt 12 Fragen und jeder Teilnehmer einer Gruppe soll einen Teil der Fragen beantworten, wobei es quasi ziehen ohne zurücklegen sein soll, denn die Fragen sollen sich nicht doppeln.

Es gibt ganz am Anfang ein Input-Feld in dem man die Anzahl der Teilnehmer eingeben soll.

Ich dachte nun daran, dass man mit einer Schleife arbeiten muss.

Es muss also eine Anzahl von Arrays (Abhängig von der Anzahl der Personen) gefüllt werden mit dem Array der Fragen. Also die Fragen liegen in einem Object Array vor, da ich die Darstellung dynamisch über ein Template machen will.

Nun glaube ich, dass jedem Nutzer wohl über eine math.random Funktion eine Frage aus dem Object Array zuweisen muss, doch leider hab ich keinen Plan wie ich es nun konkret umsetzen soll.

Könnte mir da vielleicht jemand helfen?

Lieben Gruß!

0xFADED · 27 Juni 2015

Ich hab einfach mal was runtergeschrieben.
Ich hoffe du kannst damit in etwa was anfangen

Sorry für das Denglisch aber sonst mache ich immer alles auf Englisch :rolleyes:

Für den Multiplayer Teil wirst du wohl auf PHP und AJAX oder ähnliches zurückgreifen müssen.

[src=html5]
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>Quiz</title>
</head>
<body>
<div class="container">
<li class="1 hidden question">Frage Nr.1</li>
<li class="2 hidden question">Frage Nr.2</li>
<li class="3 hidden question">Frage Nr.3</li>
<li class="4 hidden question">Frage Nr.4</li>
<li class="5 hidden question">Frage Nr.5</li>
<li class="6 hidden question">Frage Nr.6</li>
<li class="7 hidden question">Frage Nr.7</li>
<li class="8 hidden question">Frage Nr.8</li>
<li class="9 hidden question">Frage Nr.9</li>
<li class="10 hidden question">Frage Nr.10</li>
<li class="11 hidden question">Frage Nr.11</li>
<li class="12 hidden question">Frage Nr.12</li>
<li class="hidden error">Keine Fragen mehr

</li>
<br/>
<br/>
<button class="get_question">Random Frage</button>
</div>
</body>
</html>
[/src]

[src=css]
.hidden {
display: none;
}
[/src]

[src=javascript]
//Array für gesperrte Fragen
var questions = [];

//Zufallsgenerator
function random(){

function getRand(){
//Funktion erstellt Zufallszahlen in einem
//definierten Bereich.
//~~(Math.random() * (max - min + 1)) + min;
return ~~(Math.random() * (12 - 1 + 1)) + 1;
}

var match;

while(true){
if(questions.length >= 12){
//Keine Fragen mehr
match = 13;
}else{
var rand = getRand();

if(questions.indexOf(rand) === -1){
match = rand;
}

if(typeof match !== typeof undefined){
break;
}
}
}

questions.sort();
return match;
}

function updateQuestions(){
var current_question = questions[questions.length - 1];
$(".question").hide();

if(current_question > 12){
$(".error").show();
}else{
$("." + current_question).show();
}
}

$(document).ready(function(){
$(".get_question").click(function(){
//Nutzer will eine neue frage
if(questions.length < 1){
//Erster durchlauf
//Nutzer bekommt Frage 1
questions.push(1);
updateQuestions();
} else {
questions.push(random());
updateQuestions();
}
});
});
[/src]

Zum ausprobieren: jsbin.com/wafajo

keksautomat · 27 Juni 2015

Kann man auch in node.js runterschreiben lassen. Da bleibt dann alles in JS, das Frontend (für deine User) und dein Backend (wo deine Quizfragen ausgewertet werden etc.)

MisterM · 27 Juni 2015

Wow danke! Also so ausführlich hatte ich es nicht erwartet

aber das kommt wohl davon, wenn man so präzise alles erzählt..

Das Problem wegen PHP/Ajax ist eben, dass es komplett auf dem Handy laufen muss. Es handelt sich um ein HTML5 App-Prototyp für das iPhone. Ich muss es also größtenteils über javascript und co laufen lassen, aber ich frag noch mal unseren tutor ob wir dafür auch php irgendwie nutzen können!

Schönen Abend euch

0xFADED · 27 Juni 2015

Da es sich um eine App handelt gehe ich mal davon aus, dass du Cordova, Phonegap, Ionic oder ähnliches benutzt.
Es ist möglich da AJAX zu nutzen, da in der WebView CORS (Cross-Origin-Resource-Sharing) aktviert ist, was aufrufe zu externen Domains ermöglicht.

Einfach das hier in die Konsole:
[src=bash]
cordova plugin add cordova-plugin-whitelist
[/src]

Dann das in die config.xml:
[src=xml]
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
[/src]

Und wieder zur Konsole!
[src=bash]
#Nur um sicher zu gehen
cordova platform remove ios
cordova platform add ios

#Und testen!
cordova run ios
[/src]

MisterM · 27 Juni 2015

Oh sorry, dahingehend muss ich noch etwas mehr erklären:

Ich habe nur Grundkenntnisse in JAVA und es handelt sich hierbei nicht um einen funktionalen Prototypen sondern es ist eher eine Art Dummy bei dem es vor allem um die Interaktion geht. Uns hat man daher nur HTML5, CSS, JS, JQuery und ganz bisschen AJAX beigebracht.

PHP wäre hier natürlich viel leichter, da ich vor allem immer ein Schlüssel-Wert-Paar hätte, aber wir sollen eben hauptsächlich bei HTML5, CSS und JS/JQuery bleiben. Die ganzen Datenbanken muss ich daher über Object Arrays simulieren.

Ich danke aber schon mal vielmals für den Zufallsgenerator. An sich muss ich also nur noch den Wert aus dem Inputfield nehmen, entsprechend so viele Arrays anlegen und dann jeweils den Zufallsgenerator aufrufen, wobei dem ersten dann eben alle Fragen zur Verfügung stehen und dem zweiten dann entsprechend weniger.

Die App ist auf maximal 4 Leute ausgelegt, also so dass jeder 3 Fragen hat, theoretisch aber müssten auch 12 möglich sein, dann hat jeder halt nur eine Frage zu beantworten.

Unsicher bin ich mir bei ungeraden anzahlen, da wird dann entsprechend gerundet werden müssen bzw. einer hat halt mehr Fragen.. mal schauen.

Aber das hilft mir jetzt schon mal weiter! Danke

Ist etwas nervig, wir hatten einen 5 tägigen Kurs und jetzt erwartet man von uns sowas, bzw. werden wir sogar noch eine Art Algorithmus schreiben müssen für Empfehlungen basierend auf den Antworten... -.-

0xFADED · 27 Juni 2015

PHP wäre hier natürlich viel leichter, da ich vor allem immer ein Schlüssel-Wert-Paar hätte

Das bekommst du in JavaScript auch sehr leicht hin:

[src=javascript]
var array = {
"frage1" : "Was ist Blau ?",
"frage2" : "Was ist die Antwort auf alles ?"
};

//Zugriff entweder so
console.log(array.frage1);

//Oder so
console.log(array["frage1"]);
[/src]

Quiz in JavaScript für mehrere Leute - Wie genau umsetzen?

MisterM

NGBler

0xFADED

$coffee->toCode();

keksautomat

Neu angemeldet

MisterM

NGBler

0xFADED

$coffee->toCode();

MisterM

NGBler

0xFADED

$coffee->toCode();