[FRAGE] Buttons randomisieren

Arnie · 10. März 2016

Hallo liebe JavaScript Experten,

ich programmiere grade ein Lernspiel. Vom Aufbau kann man sich das wie Quizduell vorstellen.
Also es gibt eine Frage und 4 Antwort Button. Die Antwort Button sind zur Zeit so aufgebaut, dass der erste immer richtig ist. Das möchte ich ändern. Die Antworten/Buttons sollen ab besten bei jeder aktualisierung der der Seite ihre Positionen ändern. Habt ihr eine Idee wie ich das umsetzen kann?

Zum besseren Verständnis ist hier der Code:

Code:

@import models.db.Frage

@(frage: String)(antwort: String)(moeglichkeit1: String)(moeglichkeit2: String)(moeglichkeit3: String)(ende: String)

@main("Spiel"){
    <script>

        lastQuestion();

        function lastQuestion(){
            if(@ende.equals("1")){
                window.location = "/quizErgebnis";
            }
        }

        function sendAnswer(antwort){

            send(antwort);
            window.setTimeout('window.location = "/quiz"', 1000);
        }

       function send(antwort){

           var frage = document.getElementById("frageID").innerHTML;

            $.ajax({
                url: '/quiz',
                method: 'POST',
                data: JSON.stringify({
                    "frage": frage,
                    "antwort": antwort
                }),
                success: function(data){
                    $('#result').text("Success");
                },
                error:function(data){
                    $('#result').text("Failure");
                },
                dataType: 'json',
                contentType: 'application/json'
            })
           return false;
        }

    </script>
    <div class ="login-background">
        <div class="title">
            <h1>Lernmodus</h1>
        </div>

        <div class="quizfragencontainer">

            <div class="frage">
                <h2 id="frageID">@frage</h2>
                <br>
                <br>
            </div>

            <div class="antwortmöglichkeiten">
                <button id="antwort1" type="button" onclick="sendAnswer(this.innerHTML)" class="op">@antwort</button>
                <button id="antwort2" type="button" onclick="sendAnswer(this.innerHTML)" class="op">@moeglichkeit1</button> <br><br><br>
                <button id="antwort3" type="button" onclick="sendAnswer(this.innerHTML)" class="op">@moeglichkeit2</button>
                <button id="antwort4" type="button" onclick="sendAnswer(this.innerHTML)" class="op">@moeglichkeit3</button>
            </div>
            <br>
            <br>
            <button id="nächsteFrage" type="submit" class="button-container"> <label for="nächsteFrage">weiter</label></button>

        </div>

    </div>
}

Vielen Dank schon mal

kkapsner · 10. März 2016

Das ist das denn für eine Templateengine? Prinzipiell ist es besser, wenn du hier den HTML-Code zeigst, der auch beim Browser auch ankommt.

Aber zu deinem Problem: ich würde sowas ja auf der Serverseite machen, aber wenn du es unbedingt mit JS machen willst, kannst du dir einen Array der Nodes holen, diesen mischen und dann in der gemischten Reihenfolge einfügen:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#container span {
	margin-right: 1em;
}</style>
</head>
<body>
<div id="container">
	<span>1</span><span>2</span><span>3</span><span>4</span>
</div>
<script type="text/javascript">
function shuffleArray(arr){
	/**
	 * Function random.array.shuffle
	 * @name: random.array.shuffle
	 * @author: Korbinian Kapsner
	 * @version: 1.0
	 * @description: shuffles the provided array
	 * @parameter:
	 *	array:
	 */
	
	for (var i = arr.length; i--;){
		var sIndex = Math.floor(Math.random() * (i + 1));
		var h = arr[i];
		arr[i] = arr[sIndex];
		arr[sIndex] = h;
	}
	return arr;
}
shuffleArray(Array.from(document.querySelectorAll("#container span"))).forEach(function(span){
	span.parentNode.appendChild(span);
})
</script>
</body>
</html>

- wobei bei deinem HTML natürlich die <br>s stören - aber es ist sowieso besser, wenn du die Anordnung über CSS machst.

[FRAGE] Buttons randomisieren

Arnie

New member

kkapsner

Super Moderator