Inline Self-Check Questions

If you are looking for a simple way to make your content a little more interactive and keep your students or site visitors more engaged, inline questions can help. Take a look at the two examples below. I've posed questions that it is up to you to try to answer. Click a response and see if you're right.

Pretty cool, huh? If you're interested in how you can place interactive questions like these in your course or site just follow the instrictions below. For Michigan State University ANGEL users it is pretty simple. Other users will have to work a little more because the files aren't already in place for you.

Instructions for MSU ANGEL users

1. Create a new page in ANGEL
   Lessons > Add Content > Add Page
2. Set the "Page Format" to "HTML Text"
3. Copy and paste the code from below into the "Page Text" field and save your changes. (Fig. 1)
<script src="/msu_jscript/behaviour.js" type="text/javascript"></script> <script src="/msu_jscript/inline_quiz/rule_inline_quiz.js" type="text/javascript"></script> <div class="inline_quiz"> <p>What color is the sky?</p> <div class="wrong">Purple</div> <div class="wrong">Orange</div> <div class="wrong">Yellow</div> <div class="right">Blue</div> </div> <div class="inline_quiz_all"> <p>What is the abbreviation for North?</p> <div class="wrong">S</div> <div class="right">N</div> <div class="wrong">E</div> <div class="wrong">W</div> </div>

Figure 1: Here is how your page settings should look.



4. View the page and make sure that it works.
5. Edit the questions, inserting your own question text and responses.
   Set the class of the incorrect response(s) to "wrong" and the correct responses to "right".

NOTE: setting the class of the outer div to "inline_quiz" forces users to click each response individually to see whether it is correct.
Setting the outer div's class to "inline_quiz_all" reveals whether all responses are correct or incorrect with a single click.

NOTE: you can have as many right or wrong responses as you want!