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

I will send this and then I will attach the code at the end:

Dear Dominik,

We are making an IAT but it is such a different version that the IAT tool does not fit our needs.

The question has 16 stimuli, stimuli 1-8 should be responded to with left (1) and the others with right (2).
The order of the stimuli in the question is set to shuffle.
The id of the question is IA01, so the id of the stimuli is IA01_01 - IA01-16.

After an incorrect response we would like to show the word 'WRONG' in red for a short time. The way we did it, the code calls on a text element called 'wrong'.
With the help of your comment we made a code (see below) but it is still not working. We made it as a text element and put it on the right page under the question but it shows up as regular text.

Can you please tell us where the code is wrong?

Best wishes


<script type="text/javascript">
<!--
 
// 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

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

   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 ( (I101.indexOf(item) == -1) && (option == 1))
         {
         // Ignore
         return -2;

          //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(showContent, 1000); \\ 1 second
             // Hide
             content.style.display = "none";
             }
          }

         else
          {
          return 0;
          }

       //if 'item' can be found in the variable I101, so it is a trial where a left-hand response is desired
       //and the response was right-handed (option 2)
       if ( (I101.indexOf(item) != -1) && (option == 2))
          {
          // Ignore
          return -2;
          
          //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(showContent, 1000); \\ 1 second
             // Hide
             content.style.display = "none";
             }
          }
         
       else
          {
          return 0;
          }
   }
 
SoSciTools.attachEvent(window, "load", function() {
    assignmentAB01.setCallbackSelect(selFilter);
});
 
// -->
</script>

---

Please note that any code after a "return" will not be executed. I recommend to define the function showContent() above anything else (once should be sufficient) - and to call it just above the return, then.

Also, please take a look into the JavaScript error console of your browser.

Btw.: You can tell the IAT module to use just (for example) the first block of the IAT to get the 8:8 items setting you have described. However, a great deal of the module's usefulness will be lost, as the IAT result analysis will fail.

---

Dear Dominik,

we changed the code to make sure the showContent function is in the beginning. Is the code below right now?

It is still not working, the JavaScript console shows 1 error:
Uncaught SyntaxError: Invalid or unexpected token
with a SoSci link underlined:
https://www.soscisurvey.de/animals_and_people/?q=base&admin&debug&page=11&l=eng

We can't seem to find the what is causing the error...

Best wishes


<script type="text/javascript">
<!--
 
// 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

  //create array with trials where left-hand response is desired
  var I101 = [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(showContent, 1000); \\ 1 second
             // Hide
             content.style.display = "none";
             }

   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 ( (I101.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 ( (I101.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() {
    assignmentAB01.setCallbackSelect(selFilter);
});
 
// -->
</script>

---

The error message should also show a line number. You can look into the websites source code (in the browser) to find out, which line the error relates to. If you're using Firefox, you can also click the error message to see which code it refers to.

Please note, that the JavaScript code cannot work unless the errors in the console have been cleared.

---

There is no line number as far as I can see... Maybe I am looking in the wrong place...
Just in red the error and then further down the line the link

Using Chrome...

These two links lead to screenshots:
https://ibb.co/mKF5ib
https://ibb.co/hKHwpG

---

If you look to the very right in the first screenshot, there's ":874". This is the line number. It's also a hyperlink. If you click it, you should see this line immediately.

---

So when I click the hyperlink I get this view:
https://ibb.co/nsyedb

How do I proceed from thereon?

---

Not very informative, I must admit... Seems like a display bug in Chrome (possibly limited to your computer for any reasons). Would you mind, posting a pretest URL for just that page, so I could give it a glimpse on my own. You may also try and use Firefox, as this browser's developer console usually works very robust.

---

https://www.soscisurvey.de/animals_and_people/?act=qj1lftTKaIveeQCjZN2mWK9Y

This a pretest url for the pages where we would like the feedback to work...

---

In Firefox, the developer console directs to this function:

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";
             }

And, well ... the error is really wll hiden. I has to read over the marked line serveral times:

             window.setTimeout(showContent, 1000); \\ 1 second

The comment at the end is not marked with slashes (//), but with backslashes (\\). And that's no comment, but JavaScript tries to make sense of it.

---

The code is still not working. Maybe you can take a look at the questionnaire yourself?

---

The next error in the JS console is:

ReferenceError: assignmentAB01 is not defined

As your question has the ID IA01, you'll have to change assignmentAB01 into assignmentIA01.

---

Thank you for finding and helping out with this!

So now it is indeed ignoring the answer if it is wrong but it isn't showing a feedback.

---

The JavaScript error console says:

TypeError: content is null

This error referes to this lines:

var content = document.getElementById("wrong");
// restore the normal display mode
content.style.display = "";

Apparently, you did not define a HTML node with the ID "wrong" to be displayed when a wrong answer is given. Try something like this above the JS code:

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

And they you got to hide this, initially, by for example, this in the JavaScript code:

document.getElementById("wrong").style.display = "none";

---

Not sure if I understood it well...

Do you mean this:

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

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

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

  //create array with trials where left-hand response is desired
  var I101 = [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(showContent, 1000); // 1 second
             // Hide
             content.style.display = "none";
             }

   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 ( (I101.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 ( (I101.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>

---

Yes, something like this. Of course, you'll have to ensure that the symbol appears at the right position (the numbers I have chosen were just a guess). Comment-out this line in the beginning, to get the position right:

document.getElementById("wrong").style.display = "none";

---

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>