JSFiddle - React, Tailwind, and code Playground

by dkunin

HTML

<p id='excersise'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a justo id lectus volutpat consequat ut vitae libero. Aenean nisi lectus, blandit a volutpat sit amet, pellentesque non nisl. Proin ac nisl quam, quis congue turpis. In <span class='word'>ex</span> vestibulum posuere. Proin orci lorem, dapibus vel malesuada in, volutpat in turpis. Phasellus diam sapien<span class="commas"> </span> semper eget egestas sit amet, malesuada id justo. Integer blandit purus pretium elit cursus ut luctus urna facilisis. Praesent dignissim urna neque, lacinia iaculis quam. Vivamus auctor fringilla velit, ut aliquam diam mattis aliquet. Nullam vehicula dapibus bibendum. Cras in ligula ut sem iaculis feugiat ac in ipsum. Sed quis arcu vel nisl sollicitudin bibendum quis ut nulla. Vestibulum urna augue, tincidunt sit amet pellentesque commodo, blandit non orci. Curabitur quis enim ipsum. Quisque sit amet neque felis. Proin et augue dui, sed ornare mi.</p>
<div id="console"></div>
<button id="validate">asd</button>

JavaScript

$('.commas').css({
    'color':'red',
    'cursor':'pointer'
})
    
    
    $.each($('.commas'),function(value,index){
    $(this).empty();
    $("<select></select>")
    .attr('id','curSel')
    .append( $('<option></option>').val(1).html(','))
    .append( $('<option></option>').val(0).html(' '))
    .appendTo($(this))
     
    
        })
        
    $.each($('.word'),function(value,index){
    $(this).data('correct',$(this).text()).empty();
    $("<input></input>")
    .attr('id','curSel2')
       .attr('type','text')
    .appendTo($(this))
     
    
        })


        $('#validate').on('click',function(){
        
        alert(($('#curSel2').parent().data('correct')===$('#curSel2').val()))
        })