html 测试rychlostipsaní

Posted 2021-05-10

$('[name=psani]').keyup(function(){
    
    var chars = $(this).val().split("");
    var vzor = $("#vzor").text().split("");
    var correctIndex = -1;
    for(var i in chars){
        if(chars[i] == vzor[i]){
            correctIndex = parseInt(i);
        }else{
            break;
        }
    }
    var correct = '';
    var wrong = '';
    
    if(correctIndex !== -1){
        var correct = $("#vzor").text().substring(0,correctIndex+1);
    }
    if(chars.length > correctIndex+1){
        var wrong = $("#vzor").text().substring(correctIndex+1, chars.length);
    }
    var rest = $("#vzor").text().substring(chars.length, vzor.length-1);
    
    $('#display')
    .html('<span id="correct">'+correct+'</span><span id="wrong">'+wrong+'</span>'+rest);
    
    $('#auticko').css('left', $('#draha').width() * ((correctIndex+1) / vzor.length));
    
}).keyup();

#correct{
    background-color: #FFFF00
}
#wrong{
    background-color: red
}

#vzor{
    display: none;
}

#draha{
    position: relative;
    width: 100%;
    height: 0px;
    overflow: visible;
    margin-top: 64px;
}

#auticko{
    
    height: 128px;
    width: 128px;
    margin-top: -64px;
    margin-left: -64px;
    position: absolute;
    top: 0px;
    background: url(https://cdn0.iconfinder.com/data/icons/cars-and-delivery/512/coupe-128.png);    
}

<textarea name="psani"></textarea>
<div id="display"></div>
<div id="vzor">Členy Osmera byly čtyři páry partenogenických bohů, vždy tvořené mužským a jemu významově odpovídajícím ženským prvkem: Nun a Naunet, Heh a Hauhet, Kuk a Kauket, Tenemu a Tenemut. Poslední pár byl v době Střední říše nahrazen dvojicí Amon a Amaunet a v Pozdní době někdy i dvojicí Gerh a Gerhet. Shodně s ostatními kosmologicko-kosmogonickými představami Egypťanů je i toto pojetí založeno na motivu kosmického praoceánu, z nějž se v určitém okamžiku vynořil prvotní pahorek pevné země. Na rozdíl od nich ovšem tato událost není v Chemenu spojována s jediným bohem – Stvořitelem, jak bylo v Egyptě obvyklé, ale je dávána do souvislosti s blíže nespecifikovanou, neosobní a pro samotné Egypťany pravděpodobně tajemnou činností uvedené skupiny osmi bohů</div>
<div id="draha">
    <div id="auticko"></div>
</div>