Refactored hideInputsUponThreshhold to use correct prop

Added correct prop to tngy-list-item to support tangy-radio-button widget
Tangerine-Community · Jul 5, 2019 · e953c66 · e953c66
1 parent 4550c1f
commit e953c66
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 35 deletions.
diff --git a/tangy-form-item-callback-helpers.js b/tangy-form-item-callback-helpers.js
@@ -113,38 +113,44 @@ export class TangyFormItemHelpers {
     return !!input.value.find(el => el.gridAutoStopped)
   }
   hideInputsUponThreshhold(el) {
-    let inputEls = [...el.shadowRoot.querySelector("#content").children].filter(el => el.hasAttribute("name"))
-    let selectedIndex = [];
-    let concurrentIncorrectCount = 0
-    let previousIncorrect = 0;
-    inputEls.forEach((input, index) => {
-      // let currentSelection = input.getSelection()
-      let currentSelection = input.value.find(element => element.value === 'on')
-      if (currentSelection) {
-        if (currentSelection.name !== input.correctValue) {
-          selectedIndex = [...selectedIndex, index]
-          if (index == ++previousIncorrect) {
-            ++concurrentIncorrectCount
+    debugger;
+    let shouldDisable = false
+    const correctEls = el.shadowRoot.querySelector("#content").querySelectorAll('[correct]')
+    if (correctEls.length > 0) {
+      let inputEls = [...el.shadowRoot.querySelector("#content").children].filter(el => el.hasAttribute("name"))
+      let selectedIndex = [];
+      let concurrentIncorrectCount = 0
+      let previousIncorrect = 0;
+      inputEls.forEach((input, index) => {
+        const correctEls = input.querySelectorAll('[correct]')
+        const correctSelections = Array.from(correctEls).map(optionEl => optionEl.value)
+        let currentSelection = input.value.find(element => element.value === 'on')
+        if (currentSelection) {
+          if (!correctSelections.join().includes(currentSelection.name)) {
+            selectedIndex = [...selectedIndex, index]
+            if (index == ++previousIncorrect) {
+              ++concurrentIncorrectCount
+            } else {
+              concurrentIncorrectCount = 1
+            }
+            previousIncorrect = index
           } else {
-            concurrentIncorrectCount = 1
+            // reset concurrentIncorrectCount
+            // console.log("Correct answer; resetting concurrentIncorrectCount to 0")
+            concurrentIncorrectCount = 0
           }
-          previousIncorrect = index
-        } else {
-          // reset concurrentIncorrectCount
-          // console.log("Correct answer; resetting concurrentIncorrectCount to 0")
-          concurrentIncorrectCount = 0
         }
+      }, [])
+      // console.log(" selectedIndex: " + JSON.stringify(selectedIndex) + " concurrentIncorrectCount: " + concurrentIncorrectCount + " previousIncorrect: " + previousIncorrect)
+      shouldDisable = concurrentIncorrectCount >= el.incorrectThreshold ? true : false
+      if (shouldDisable === true) {
+        let highest = Math.max(...selectedIndex) + 1
+        // console.log("Making the subsequent inputs hidden starting with " + highest)
+        let inputsToHide = inputEls.slice(highest)
+        inputsToHide.forEach((inputEl, index) => {
+          inputEl.hidden = true
+        })
       }
-    }, [])
-    // console.log(" selectedIndex: " + JSON.stringify(selectedIndex) + " concurrentIncorrectCount: " + concurrentIncorrectCount + " previousIncorrect: " + previousIncorrect)
-    let shouldDisable =  concurrentIncorrectCount >= el.incorrectThreshold ? true : false
-    if (shouldDisable === true) {
-      let highest = Math.max(...selectedIndex) + 1
-      // console.log("Making the subsequent inputs hidden starting with " + highest)
-      let inputsToHide = inputEls.slice(highest)
-      inputsToHide.forEach((inputEl, index) => {
-        inputEl.hidden = true
-      }  )
     }
     return shouldDisable
   }

diff --git a/tangy-list-item.js b/tangy-list-item.js
@@ -34,7 +34,7 @@ export class TangyListItem extends PolymerElement {
   }
 
   static get _props() {
-   return ['name','value','label','disabled','invalid','incomplete','hidden']
+   return ['name','value','label','disabled','invalid','incomplete','hidden','correct']
   }
 
   static get properties () {
@@ -68,6 +68,11 @@ export class TangyListItem extends PolymerElement {
         type: Boolean,
         value: false,
         reflectToAttribute: true
+      },
+      correct: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
       }
 
     }

diff --git a/test/tangy-form-item_test.html b/test/tangy-form-item_test.html
@@ -85,31 +85,31 @@
             <tangy-radio-buttons name="fruit_selection1" label="What is your favorite fruit?" correct-value="Cherry">
               <option name="tangerine">Tangerine</option>
               <option name="cantalope">Cantalope</option>
-              <option name="cherry">Cherry</option>
+              <option name="cherry" correct>Cherry</option>
             </tangy-radio-buttons>
             <tangy-radio-buttons name="fruit_selection2" label="What is your favorite fruit?" correct-value="Cherry">
               <option name="tangerine">Tangerine</option>
               <option name="cantalope">Cantalope</option>
-              <option name="cherry">Cherry</option>
+              <option name="cherry" correct>Cherry</option>
             </tangy-radio-buttons>
             <tangy-radio-buttons name="fruit_selection3" label="What is your favorite fruit?" correct-value="Cantalope">
               <option name="tangerine">Tangerine</option>
-              <option name="cantalope">Cantalope</option>
+              <option name="cantalope" correct>Cantalope</option>
               <option name="cherry">Cherry</option>
             </tangy-radio-buttons>
             <tangy-radio-buttons name="fruit_selection4" label="What is your favorite fruit?" correct-value="Cantalope">
               <option name="tangerine">Tangerine</option>
-              <option name="cantalope">Cantalope</option>
+              <option name="cantalope" correct>Cantalope</option>
               <option name="cherry">Cherry</option>
             </tangy-radio-buttons>
             <tangy-radio-buttons name="fruit_selection5" label="What is your favorite fruit?" correct-value="Cantalope">
               <option name="tangerine">Tangerine</option>
-              <option name="cantalope">Cantalope</option>
+              <option name="cantalope" correct>Cantalope</option>
               <option name="cherry">Cherry</option>
             </tangy-radio-buttons>
             <tangy-radio-buttons name="fruit_selection6" label="What is your favorite fruit?" correct-value="Cantalope">
               <option name="tangerine">Tangerine</option>
-              <option name="cantalope">Cantalope</option>
+              <option name="cantalope" correct>Cantalope</option>
               <option name="cherry">Cherry</option>
             </tangy-radio-buttons>
           </tangy-form-item>