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

Mar 19, 2019

Connie Malamed
By Connie Malamed

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. So, wondering if the feedback box can be modified.

Thanks! 

Pinned Reply
33 Replies
Morten Skoglund
over 2 years ago12/14/21 at 9:42 am (UTC)
Andrew Smith

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

We are not useing a lms. I tried to add the multiple choice line into the index.html file but I'ts not working? Im using this line. Where should I insert it in the file?

 

}

/* 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;
}

Andrew Smith
over 2 years ago12/14/21 at 10:11 am (UTC)

Hi Morten, while I don't use the web publish option myself and I haven't spent any time testing it until now, the css I suggested above works for me when I publish for web?  If you only want to hide the feedback indicators for multiple response (checkboxes where you can choose more than one response item) then you just need to paste the code snippet you highlighted right before the end of the style block that is already in index.html.

If you want to escape other question types (like multiple choice) you'll also need to include the css for the other question types you are using.

My sample code works as of today but it isn't guarenteed to keep working in the future as class names change, so if the sample code stops working at some point, you will need to use your browser's inspector to see what the new path to the asset is that you'd like to hide and update the css accordingly.

Regards,

Andrew

Andrew Smith
almost 2 years ago07/15/22 at 3:08 am (UTC)

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');
}
Deidre Witan
almost 2 years ago07/15/22 at 3:58 pm (UTC)

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! 

Sign In to Reply