Note that there are some explanatory texts on larger screens.

plurals
  1. POReset the correct answers on select
    text
    copied!<p>I have a <code>&lt;ul&gt;</code> with <code>&lt;li&gt;</code> in it and I have a drop down selection menu. </p> <p>The selection menu has 3 options. In one option you can select multiple regions and in the other two options you can only select one region. </p> <p>I want to make it so that <strong>if I am on multiple regions and have multiple regions selected</strong> that when I change the selection to have only one region selected, it will reset all of the regions to incorrect, which means that none have been selected. Here is my code below:</p> <p><strong>HTML:</strong></p> <pre><code>&lt;div style="min-height:100%;min-width:100%;" class="multiple-choice" id="{{id}}"&gt; &lt;div style="margin-left:15px;" class="form-inline"&gt; &lt;label style="display:inline;"&gt;Type of Hotspot:&lt;/label&gt; &lt;div class="btn-group" style="margin-bottom:5px;"&gt; &lt;button class="btn btn-indicator itemLayout hotspottype" data-model="type" style="width:175px;"&gt;&amp;nbsp;&lt;/button&gt; &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt; &lt;span class="caret"&gt;&lt;/span&gt; &lt;/button&gt; &lt;ul class="dropdown-menu type-dropdown-menu"&gt; &lt;li&gt; &lt;a href="#" class="item"&gt;Place Token&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#" class="item"&gt;Select One Region&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#" class="item"&gt;Select Multiple Regions&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- was missing from OP markup --&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>javascript:</strong></p> <pre><code>var regionElement = $('#' + _me.UUID).find('.hostpostRegions'); var objsToMake = desired - current; var start = current + 1; if( objsToMake &gt; 0 ){ retrieve( _me.TemplateRegionsObj ) .done( function( template ){ var regionTemplate = template; var html; for( var i = start; i &lt;= desired; i++ ){ html = createHTML( regionTemplate, {id: UUID.generate(), sequence: i} ); regionElement.append( html ); numberItems(); } }) } //END if if( objsToMake &lt; 0 ){ var objsToDelete = Math.abs(objsToMake); for( var j = 0; j &lt; objsToDelete; j++ ){ regionElement.children('li:last').remove(); } } //END if current = desired; }; //END document.ready var toggleStatus = function (el) { var correctResponse = _me.ResponseDeclaration()[0].correctResponse.value; var currentId = el.attr('data-choice-id'); var currentState = el.attr( 'data-status'); if( currentState === 'correct' ) { el.attr( 'data-status', 'incorrect' ).attr( 'src', 'img/at_answercheck.png' ); } else { el.attr( 'data-status', 'correct' ).attr( 'src', 'img/at_answercheck_down.png' ); } }; //END toggleStatus fn var dependencies = function(){ registerButton('#' + _me.UUID + ' .type-dropdown-menu li a', function(choice) { //debug.log('change2: ' + choice.text()); }); registerButton('#' + _me.UUID + ' .numRegions-dropdown-menu li a', function(choice) { var desiredRegions = Number(choice.text()); addRegions(desiredRegions); }); $( '#' + _me.UUID + ' .sortable' ).on('click', '.correctChoice', function(){ var el = $(this); var numAnswers = $( '#' + _me.UUID + ' .hotspottype').text(); var currentState = el.attr('data-status'); var currentId = el.attr('data-choice-id'); var currentCorrectList = el.closest( 'ul' ).find('[data-status="correct"]'); toggleStatus(el); if (currentState === 'incorrect') { if (numAnswers === 'Select One Region') { currentCorrectList.each( function( index, value ) { if ($(this).attr('data-choice-id') !== currentId) { toggleStatus($(this)); } }); } } return; }); }/*-- Was missing from OP code; assured a typo --*/ </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload