JSFiddle - React, Tailwind, and code Playground

by Laxmikant Dange

HTML

<input data-correctanswer="javascript" id="answer1" name="" type="text">This works fine (no special chars)
<br/>
<button id="btn1">check 1</button>
<br/>
<input data-correctanswer="jávascripté" id="answer2" name="" type="text"> 
<br/>
<button id="btn2">check 2</button>
<div style="border: 1px solid;" id="result"></div>

JavaScript

$(document).ready(function () {

     var count;
     $('#btn1').click(function () {
         checkAnswer($('#answer1').data('correctanswer'), $('#answer1').val());
         $('#result').append('result: ').append(count);
     }); // end of click
     $('#btn2').click(function () {
         /*Get returned value to variable here*/
         var count=checkAnswer($('#answer2').data('correctanswer'), $('#answer2').val());
         $('#result').append('result: ').append(count);
     }); // end of click


     function checkAnswer(coorAns, UserAnswer) {
         var count = 0;
         //  var coorAns = $('input[type=text]').data('correctanswer');
         //  var UserAnswer = $('input[type=text]').val();
         var mistakesAllowed = 1;

         if (UserAnswer === coorAns) {
             count = count + 2;
         }
         for (i = 0; i < coorAns.length; i++) {
             if (coorAns.charAt(i) !== UserAnswer.charAt(i)) {
                 mistakesAllowed--; // reduce one mistake allowed
                 if (mistakesAllowed < 1) { // and if you have more mistakes than allowed
                     count = count + 1;
                 }
                 if (mistakesAllowed < 0) {
                     count = count - 2
                     break;
                 }
             }
         }
         console.log('final count: ' + count);
         return count;
     }

 });