We would like to implement feedback within an assignment type of question

Question

Hi Dominik,
we would like to do exactly that what you briefly describe here:
provide feedback for specific items within an assignment question, just for the wrong answers.
We thought about creating in the java script an array of the item numbers that are related to a correct response and one for the wrong response, we did not really find out how to combine that with the selection filter function.

Could you please give us a hint for how to code that?

Thank you!

All the best,
Hedwig

Answer 1

I assume, you have already seen the JavaScript example in the manual Assignment?

What you now do is to define conditions under which the assignment question shall not accept the answer (return -2) and at the same time display some HTML element on the page, by for example, changing its style.display value from "none" to default (""). And you'll have to start a time via window.setTimeout() to hide the feedback element after a short while.

I'm not so sure what the exact question is? If you gave me a hint, I can be more clearly. At least, I hope so :)

Just as a side note: Should this go into the direction of an IAT, you may be interested in the "implicit methods" module that includes AMP, IAT, BIAT, and SC-IAT.

Comments

When we comment the line out it permanently shows a big red X on the screen on top of the normal screen.

When we don't comment the line out it still isn't working. It ignores a wrong response but no feedback...

Maybe you would like to see the questionnaire for yourself if we give you the access codes?

---

Please never share access codes. If you ever want someone else to work in the project, the options to share a project in the projects settings are quite fine ;)

I checked your code in the pretest link (above) and found this error:

function showContent() {
  var content = document.getElementById("wrong");

  // restore the normal display mode
  content.style.display = "";
  // start the timer
  window.setTimeout(showContent, 1000); // 1 second
  // Hide
  content.style.display = "none";
}

This shows the "wrong" symbol and than immediately hides it, again. Change it like this to delay the hiding:

  ...
  // start the timer
  window.setTimeout(function() {
    // Hide
    content.style.display = "none";
  }, 1000); // 1 second
}

---

I'm sorry, share the project is what I meant :)

So now it all works fine, the only thing we are wondering is why it shows a big red X on the screen instead of the text element "wrong"...?
We cannot figure out where the red X came from...

---

You have added this X here, it's the symbol.wrong.png.

<div style="position: absolute; top: 200px; left: 200px;" id="wrong"><img src="../layout/symbol.wrong.png" style="width: 200px;"></div>

Whatever you put into the <div> will be displayed as message. If you choose to display a text element, you'll have to surround it with a <div> that takes care of the correct position, and the ID (so that JavaScript can address it). And, of course, you'll have to add this text element to your page.

---

Changed it now to show 'wrong' instead and it works perfectly now! Thank you so much for the help and quick responses!

To help other people who might need this in the future I will post the code below.

<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:70px; color:#FF0000; font-weight:bold;" id="wrong">WRONG</div>

<script type="text/javascript">
<!--

//this bit is needed to show the feedback display for long enough, otherwise it loads the display and hides it immediatly after
document.getElementById("wrong").style.display = "none";
 
// Filter function IA01 Compatible
  // Filter needs to respond when wrong response is given
  // Ignore left-hand option (1) in stimuli 9,10,11,12,13,14,15,16
  // If not left-hand then return 0 (go on to next stimulus as if there was no filter)
  // Ignore right-hand option (2) in other stimuli
  // IA101 needs to be replaced for other questions

  //create array with trials where left-hand response is desired
  var IA101 = [1,2,3,4,5,6,7,8]

 //Create function to show feedback for limited time and hide, feedback = text element with id 'wrong'
          function showContent()
             {
             var content = document.getElementById("wrong");

             // restore the normal display mode
             content.style.display = "";
             /// start the timer
             window.setTimeout(function()
             {
             // Hide
             content.style.display = "none";
             }, 1000); // 1 second
             }

   function selFilter(item, option)
   {

      //indexOf returns -1 if the number is not found and something other than -1 i it is found

      //if the 'item' cannot be found in the variable IA01, so it is a trial where a right-hand response is desired
      //and the response was left-handed (option1)
      if ( (IA101.indexOf(item) == -1) && (option == 1))
         {
         // Show feedback and ignore answer
         showContent()
         return -2;
          }

      //if the 'item' can be found in the variable IA01, so it is a trial where a left-hand response is desired
      //and the response was right-handed (option2)
      else if ( (IA101.indexOf(item) != -1) && (option == 2))
          {
          // Show feedback and ignore answer
          showContent ()
          return -2;
          }

      //otherwise continue with next trial
      else
          {
          return 0;
          }
   }
 
SoSciTools.attachEvent(window, "load", function() {
    assignmentIA01.setCallbackSelect(selFilter);
});
 
// -->
</script>