Forum Discussion

InstructionalDe's avatar
InstructionalDe
Community Member
6 years ago

Rise: Is there a way to remove Correct and Incorrect text/graphics in feedback boxes?

Is there a way to display a feedback box with text only and no correct and incorrect label? Sometimes, there are shades of gray and not all responses can align to a Correct and Incorrect framework. ...
rise 360
  • GrenForonda's avatar
    GrenForonda
    3 years ago

    Hi everyone! Now you can make quizzes more challenging. Show learners feedback without revealing correct answers! Find out how in this article. Enjoy!

AndrewSmith-032's avatar
AndrewSmith-032
Community Member

While having this as a native capability would be better. Rise is pretty easy to tinker with after publishing. We regularly inject custom css and js into scormcontent/index.html to override and extend Rise

For example you can hide the feedback ticks and crosses with:

<style>
 /* Hide multiple choice correct/incorrect choice indicators */
 .quiz .quiz-card__feedback--active .quiz-card__feedback-icon {
   display: none;
 }

 /* Hide multiple response correct/incorrect choice indicators */
 .quiz .quiz-multiple-choice-option__indicator svg,
 .quiz .quiz-multiple-response-option-wrap--complete .quiz-multiple-response-option__indicator svg {
   display: none;
 }

 /* Hide fill in correct/incorrect indicators */
 .quiz .quiz-fill__icon--visible {
   display: none;
 }

 /* Hide matching question correct/incorrect choice indicators */
 .quiz .quiz-match__list--results {
   display: none;
 }

 /* Normalise the choice border so that it doesn't give away the correct response */
 .quiz-multiple-choice-option__border.brand--beforeBorder::before,
 .quiz-multiple-response-option--incorrect.quiz-multiple-response-option--selected .quiz-multiple-response-option__border::before {
   border-color:#50abf1 !important;
 }

 /* Hide Acceptible Response */
 .quiz-fill .quiz-fill__options--visible {
   display: none;
 }

 /* Darken the feedback text to make it more legible */
 .quiz .quiz-card__feedback-text {
   color: #313537;
 }

 /* Hide final speed dial with the score */
 /*
 .quiz .quiz-results__results,
 .quiz .quiz-card__feedback-label {
   display:none;
 }
 */
</style>

Please note: The above is slightly edited to what we use in production. We inject custom classes so we can target questions precisely and I've tweaked the above a bit to make it more generic, but it should work for most cases.

Dropping the above into index.html and customising to your needs will solve many of the issues identified in this thread, but with a bit of javascript you can do lots of things like:

  • Hiding the final speed dial and replacing it with a general message (when you don't want people to know how they have gone)
  • Turning fill-in questions into reflection questions where they are marked correct regardless of what people enter (you can even send their full response to the LMS)
  • Changing multiple choice questions so that the value scored isn't binary true/false. For example choosing "C" might be scored as 100 (best answer) but choosing "A" might be scored as "50" (acceptable, but not the best response).

Rise is by far the best authoring environment currently available (and the only truly responsive option). It would be nice if it got a bit more love from Articulate, but because it's just html + css + javascript, the great thing is you can add many new features yourself while you wait for them to be added to Rise core.

With a bit of backend wizardry you can even auto-inject your extension logic so you don't have to patch by hand.

Regards,

Andrew

DeidreWitan-50c's avatar
DeidreWitan-50c
Community Member
3 years ago

Andrew, 

Thank you so much for this detailed explanation! Do you happen to have a resource for how to create custom classes? That would be super useful for us.

  • AndrewSmith-032's avatar
    AndrewSmith-032
    Community Member
    3 years ago

    Hi Deidre,

                     There's no way to do this in the Rise web editor, so we do it via javascript.  The only tricky part is working out how to uniquely target the element you want to add the class to.  I use the built in developer tools in FireFox/Chrome, but it's a bit trial and error.  Once you have a css path to your element then it's pretty straight forward to include some javascript as outlined in my original post like this:

    let quiz_card = quiz_feedback
      .closest('.quiz-card__main')
      .querySelector('.quiz-card__interactive > div:first-child > div:first-child');

    if (quiz_card) {
      quiz_feedback.classList.add('my-custom-class');
    }
    • DeidreWitan-50c's avatar
      DeidreWitan-50c
      Community Member
      3 years ago

      Ah this is perfect thank you Andrew!

      FYI for others following along: using the display: none; declaration in the css file like Andrew described above works like a charm to get rid of the feedback icons and labels, but it doesn't actually remove or change any code. So that means screenreaders will still give you correct/incorrect feedback and tell you which answer was "correct." I think you can probably fix this with aria tags but I haven't investigated yet.

      Since we only needed this for a single question (in a lesson with other questions where we wanted correct/incorrect feedback) I decided to just do it as a storyline block and format it so it looked like part of the rise course. Attached here in case it helps someone else! 

Related Content