html - How to create button according to options in jquery -


i made "choose , reorder" module in drag , drop options if options arranged in correct order show button along correct(shown in figure) https://www.screencast.com/t/n8u5m0akkjd

i have made half of module button part left.can guide me this?

function eval() {     $( ".ui_color" ).each(function() {         var x= $(this).attr('value');           var y = $(this).parent().children().index(this) + 1;    if(x==y)   {     alert('right')   }   else   {   alert('wrong');   } }); }   $( function() {         $( "#sortable" ).sortable({           revert: true         });         $( "#draggable" ).draggable({           connecttosortable: "#sortable",           helper: "clone",           revert: "invalid"         });         $( "ul, li" ).disableselection();       } );         $( "#sortable" ).sortable({           revert: true,            update: function(event, ui){             var currentorder = '1,2,3';             var sortorder = [];             $(event.target).find('li').each(function(){               sortorder.push($(this).attr('value'));              })             if(sortorder.join(',') === currentorder){               //alert('correct answer');             }else{               //alert('wrong answer');             }                alert('hi');                var x= eval();           }          }); 
ul {          list-style-type: none;          margin: 0;          padding: 0;         margin-bottom: 10px;       }     .ui_color {          margin: 5px;          padding: 5px;          width: 570px;          height: 47px;         background-color: #46b8da;         border: 1px solid #c5c5c5;         font-weight: normal;         color: #454545;     }     .header     {         border: 1px solid black;         width: 569px;         height: 37px;         padding: 17px 0 0 11px;         margin-left: 6px;     }     .bottom{         display: inline;         float: left;         border-right: 1px solid;         padding: 0px 6px 1px 6px;         margin-right: 7px;     }     .tablelike     {         height: 450px;     }     .full_border     {         border: 1px solid #800080;         width: 592px;     } 
<!doctype html>               <title>jquery ui draggable + sortable</title>             <link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">              <script src="https://code.jquery.com/jquery-1.12.4.js"></script>             <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>             <script src="jq_assingment.js"></script>          <body>             <form name="drag_drop" id="drag_drop" class="full_border">                 <div class="header">                     <span id="draggable" class="border">choose & re-order</span>                 </div>                 <div>                        <ul id="sortable" class="tablelike">                         <li class="ui_color" value="1" correct_seq="">1.typically sentence contain subject , practice.</li>                         <li class="ui_color" value="2">2.although may make little sense taken in isolation out of context.</li>                         <li class="ui_color" value="3">3.a sentence set of words in principle tells complete thought,</li>                     </ul>                 </div>                   <div class="">                     <ul>                         <li class="bottom">review</li>                         <li>correct answer</li>                     </ul>                 </div>             </form>          </body>     </html>

here go solution https://jsfiddle.net/flxatasw/

function eval()  {      $( ".ui_color" ).each(function() {          var x= $(this).attr('value');             var y = $(this).parent().children().index(this) + 1;  	$('ul li:nth-child(' + y + ')').find('button').remove();    if(x==y)    {      $('ul li:nth-child(' + y + ')').append('<button type="submit" class="right">right</button>')    }    else    {    	$('ul li:nth-child(' + y + ')').append('<button type="submit" class="wrong">wrong</button>')    }  });  }     $( function() {          $( "#sortable" ).sortable({            revert: true          });          $( "#draggable" ).draggable({            connecttosortable: "#sortable",            helper: "clone",            revert: "invalid"          });          $( "ul, li" ).disableselection();        } );           $( "#sortable" ).sortable({            revert: true,              update: function(event, ui){              var currentorder = '1,2,3';              var sortorder = [];              $(event.target).find('li').each(function(){                sortorder.push($(this).attr('value'));               })              if(sortorder.join(',') === currentorder){                //alert('correct answer');              }else{                //alert('wrong answer');              }                 var x= eval();            }            });
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  <form name="drag_drop" id="drag_drop" class="full_border">      <div class="header">          <span id="draggable" class="border">choose & re-order</span>      </div>      <div>             <ul id="sortable" class="tablelike">              <li class="ui_color" value="1" correct_seq="">1.typically sentence contain subject , practice.</li>              <li class="ui_color" value="2">2.although may make little sense taken in isolation out of context.</li>              <li class="ui_color" value="3">3.a sentence set of words in principle tells complete thought,</li>          </ul>      </div>        <div class="">          <ul>              <li class="bottom">review</li>              <li>correct answer</li>          </ul>      </div>  </form>


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more