JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<ul id="questions"></ul>

<div id="loesung">
    <h3>Lösung:</h3>
</div>

CSS

dd {
}
dt { width: 200px; }
.fragment { float: left; }

JavaScript

Array.prototype.shuffle = function() {
    var len = this.length;
    var i = len;
    while (i--) {
        var p = parseInt(Math.random()*len);
        var t = this[i];
        this[i] = this[p];
        this[p] = t;
    }
};

;$(function () {
    var answer = "Password",
        game = [],
        index = [0, 1, 2, 3, 4, 5, 6, 7],
        question = [
            {question: '...und Paul', answer: 'Peter'},
            {question: 'Gegenteil von Neu...', answer: 'Alt'},
            {question: 'kleines Gewässer', answer: 'See'},
            {question: 'ätzendes Gemisch', answer: 'Salzsäure'},
            {question: 'Englisches Wort für Welt', answer: 'World'},
            {question: 'Otto rückwerts!', answer: 'Otto'},
            {question: 'Kämpfer mit Schwert und Schild', answer: 'Ritter'},
            {question: 'Nachname von Donald', answer: 'Duck'},
        ];
    
    index.shuffle();

    $.each(answer.split(''), function (i, frag) {
        game.push({
            fragment: frag, 
            element: $('.raetsel').eq(index[i]),
            question: question[i]
        });
        $('#questions')
            .append($('<dt />', {html: question[index[i]].question}))
            .append($('<dd />', {html: '<input class="raetsel" type="text"/>'}))
        
        $('#loesung').append(
            $('<div />', {html: '[ ]', class: 'fragment'})
        );
    });
    $('.raetsel').keyup(function () {
        
        var i = $(this).index('input');
        
        if(game[index[i]].question.answer.toLowerCase() == $(this).val().toLowerCase()) {
            
            $(this)
                .css({border: '1px solid green'})
                .blur();
            
            $('#loesung .fragment').eq(index[i]).html('['+game[index[i]].fragment+']')
        }
            
    })    
});