[FRAGE] Vorhandenes Programm Node.js anpassen

[Paule2020]

Hallo zusammen,

ich habe auf github einen kahoot-clone gefunden, was aber leider nicht mehr aktiv ist...

Ich kenne mich mit JS nicht aus, aber habe ein bisschen Verständnis von Java.

Ich würde gerne die Fragen, die aktuell nur auf Screen des Hosts angezeigt werden, auch bei den Clienten selber anzeigen. Ich habe mir dann den Quellcode angezeigt und bin zu folgendem Ergebnis gekommen:

Anzeige der Fragen auf dem Host:
/public/js/hostGame.js

socket.on('gameQuestions', function(data){
    document.getElementById('question').innerHTML = data.q1;
    document.getElementById('answer1').innerHTML = data.a1;
    document.getElementById('answer2').innerHTML = data.a2;
    document.getElementById('answer3').innerHTML = data.a3;
    document.getElementById('answer4').innerHTML = data.a4;
    var correctAnswer = data.correct;
    document.getElementById('playersAnswered').innerHTML = "Players Answered 0 / " + data.playersInGame;
    updateTimer();
});

Also wird mit dieser Zeile die Frage angezeigt: document.getElementById('question').innerHTML = data.q1;

Dann dachte ich, schaue ich in die public/js/playerGame.js und ergänze passend

socket.on('nextQuestionPlayer', function(){
    correct = false;
    playerAnswered = false;
    
    document.getElementById('answer1').style.visibility = "visible";
    document.getElementById('answer2').style.visibility = "visible";
    document.getElementById('answer3').style.visibility = "visible";
    document.getElementById('answer4').style.visibility = "visible";
    document.getElementById('message').style.display = "none";
    document.body.style.backgroundColor = "white";
    
});

Diese habe ich dann folgermaßen ergänzt:

socket.on('nextQuestionPlayer', function(data){
    correct = false;
    playerAnswered = false;
    document.getElementById('question').innerHTML = data.q1;
    document.getElementById('answer1').style.visibility = "visible";
    document.getElementById('answer2').style.visibility = "visible";
    document.getElementById('answer3').style.visibility = "visible";
    document.getElementById('answer4').style.visibility = "visible";
    document.getElementById('message').style.display = "none";
    document.body.style.backgroundColor = "white";
    
});

Außerdem habe ich in der gameView.css das Feld question ergänzt.

Die erste Frage "funktioniert" in dem Sinn, dass ich zwar eine Antwort auswählen kann, die Frage wird nicht angezeigt, aber sobald ich dann auf "weiter" klicke, passiert nichts mehr.

Wäre jemand so nett, mir einen Hinweis zu geben, wo hier grundsätzlich mein Denkfehler gibt?

Was ich auch nicht verstehe, ob bei socket.on(...) nextQuestionPlayer bzw. gameQuestions ein Übergabeparameter ist oder ob die die Fkt. definiert wird.

Vielen Dank!

 

[mikdoe]

Wenn das was für Browser ist, könntest du mal mit F12 in der Console schauen, was ihm nicht gefällt.

 

[Paule2020]

Hallo,
ihm gefällt nicht:

document.getElementById('question').innerHTML = data.q1; --> data.q1 not defined

 

[kkapsner]

Du musst wahrscheinlich die Funktion anpassen, die die Antworttexte bei den Spielern ändert. Du hast nur die "Reset"-Funktion angepasst.

PS: wie ist denn der Link zu dem Github Repository?

 

[Paule2020]

Wenn du mir sagst, was und wo ich es ändern muss, dann versuche ich es gerne selbst.

Danke!

https://github.com/ethanbrimhall/kahoot-clone-nodejs

 

[kkapsner]

Zuerst musst du beim Server ändern, dass an den Spieler auch die Fragedaten geschickt werden (https://github.com/ethanbrimhall/kahoot-clone-nodejs/blob/master/server/server.js#L301-L429 in Zeile 428 wird das Event an den Spieler geschickt - aber eben ohne Daten im Gegensatz zum Spielleiter Zeile 336). Wenn du dann die Daten beim Spieler hast, kannst du sie auch anzeigen lassen.