formatting multiple choice questions

[louiscbrown]

How can I create multiple choice answers in the following format
⨀ A. portray the Soviet Union as an aggressive force that could be controlled only by an alliance of world powers
⨀ B. describe the influence the Marshall Plan of 1947 had on the creation of NATO

I tried using html editor but since each question is self contained I was not able to do this. I would like to use something similar to the following

<ol type="A">
<li>portray the Soviet Union as an aggressive force that could be controlled only by an alliance of world powers</li>

<li>  describe the influence the Marshall Plan of 1947 had on the creation of NATO </li>

</ol>

[DeniseMLee]

I have the same question.  Does anyone have a solution?

[James]

@louiscbrown, @DeniseMLee 

There is no simple switch you can flip to automatically label the quiz answers. Any attempt to label the answers will require substantial effort on someone's part.

Most of my comments apply to Classic Quizzes, which are being deprecated and not further developed by Canvas. I will address New Quizzes at the end.

If you don't randomize the order of the responses, then you can just make the A. and B. part of the answer. If you do randomize the order, then A and B do not make sense. If your responses refer to "A and B but not C" and you randomize the order, then it's meaningless. Rewrite the responses.

If you want to randomize the order and still name them A, B, ..., then you're going to have a difficult time and you should give up the idea. The multiple choice questions are not coded as an ordered list (or a list at all) so the HTML numbering doesn't apply. They are a bunch of div statements, one after the other.

You could need to write JavaScript that could go and manually add the letter in front of each statement. The question is where to put the letter?

• Does it go with the radio button. It wraps so that it appears below the radio button when you do.
• Does it go in the region between the span that holds the radio button and the div that holds the text? It doesn't align correctly, which means you would need to add some CSS to position it correctly. I didn't test this with a mutli-line answer or an HTML answer to see if it was different from a text-only response. The insertion of an extra span may throw off code that expects there to be a span followed immediately by a div.
• Does it go as part of the div that holds the response? This looks like part of the question answer (because it is), but I'm not sure what ramifications that has.

Here are examples of what the three ways look like (in the order listed above):

Now comes the real hangup. To do this, you need to install the JavaScript at the account or subaccount level. That means that it will apply to every user, not just your classes and certainly not just a single quiz. You may be setup so that there is a separate subaccount for just your classes or for those who need this feature, I cannot be sure. I suspect that almost all Canvas administrators would not be willing to implement this site-wide for just a single instructor.

You would also have to test to make sure that this worked with the mobile apps.

Here is some example code that will go through and do the second option with a little padding to make it align with the text and space it away from the radio button.

(function() {
  if (!/^\/courses\/\d+\/quizzes\/\d+\/take$/.test(window.location.pathname)) {
    return;
  }
  const Q = document.querySelectorAll('div.question.multiple_choice_question');
  if (Q.length > 0) {
    for (const question of Q) {
      const A = question.querySelectorAll('div.answers > fieldset > div.answer > label.answer_row');
      if (A.length > 0) {
        A.forEach((e, i) => {
          const div = e.querySelector('div.answer_label');
          const letter = String.fromCharCode(i + 65);
          const span = document.createElement('span');
          span.style.paddingLeft = '10px';
          span.style.paddingTop = '2px';
          span.textContent = `${letter}. `;
          e.insertBefore(span, div);
        });
      }
    }
  }
})();

And here is what it looks like:

The windows.location.pathname code at the top is to check to see if it is in a quiz that is being taken. You don't want to make these modifications otherwise, so it returns right away without trying to do any of the other manipulations. However, that means that it won't be shown when the answers are given to the students after completing the quiz.

The above is something I just threw together in about an hour without a lot of testing. It would take a lot more development before it was ready to use.

Lest you think this is great and your Canvas Admin should implement it right away, let me be clear on my messaging. That hour I spent on this is about 59 minutes longer than the idea deserves. Modifying this through JavaScript code is something that should not be done, even though it may be possible.

With New Quizzes, you have more flexibility than Classic Quizzes in the positioning of multiple choice questions. However, New Quizzes isn't fully developed yet and so trying to write anything like this for those would be premature and still a bad idea.

New Quizzes will be even harder for people to manipulate through JavaScript since it's an external tool and those operate in a sandboxed iframe that you cannot reach from the main Canvas page. That means that injecting custom JavaScript is going to be harder --- I haven't found a way yet other than to run a userscript and that runs inside the individual user's browser, not by something you can globally push out through custom JavaScript.

In other words, the one place you can do something automatically is about to disappear so you shouldn't waste time developing it. Find some other way of getting the letters in there or rethink how you ask the questions.

[DeniseMLee]

Thanks so much, James!  I am transitioning to Canvas from Blackboard Learn right now and your answer has helped me figure out how to transition my quiz question content optimally.