Question/Answer Pair Elements
This tool is aimed at making online course readings more engaging. In these elements, a question is asked. Then, a student can click the "Show Answer" button to reveal more information. These are ideal for questions that have multiple correct answers which students need produce themselves. Question/Answer pair elements can be used in conjunction with Inline Quiz Questions or completely on their own. Click the "Show Example" link in below for a demonstration of how a QA element works.
Although this tool is designed for use in the ANGEL LMS, it could be used in any web site.
Show Example
Check Your Knowledge:
Name the four cardinal directions.
-North
-South
-East
-West
The Files:
behaviour.js - Uses css selectors to apply javascript behaviours to enable unobtrusive javascript in html documents. [ more info]
rule_qa.js- Contains the behaviours for question and answer format quizzing elements.
styles_qa.css- Determines how the question and answer (reveal multiple answer) elements will be displayed.
show_answer.gif- Graphic for the "Show Answer" button.
hide_answer.gif- Graphic for the "Hide Answer" button.
The Setup:
1. Copy/paste the following code into your page at the specific point where you want the question(s) to appear:
<p>Check Your Knowledge:</p>
<div class="qa">
<div class="q">Ask the question here. Note that it is in its own <div> with the class of "q"</div>
<div class="a">--Provide the answers here<br>
--Put answers on different lines using the line break tag<br>
--Make sure to close the <div> after the final answer</div>
</div>
2. Edit the HTML code to make it fit your questions and answers. The question goes in the <div> with class "q" and the answers go in the <div> with class "a." Use <br> tags to skip lines between each answer. You can have as many questions as you want, just add more lines separated by <br> tags before the closing </div>.
Note: If you are creating multiple questions, be sure to enclose each one in its own <div> and </div> with the proper class attached to it.
Tip: You do not need to repeat the <p>Check Your Knowledge</p> portion of the code before each question, so simply delete it in all questions subsequent to the first one. You could also eliminate the entire <p>Check Your Knowledge:</p> line altogether, or substitute in some other text.
3. At the very bottom of your page, paste the following code which calls the javascript files listed above.
<script src="/msu_jscript/behaviour.js"></script>
<script src="/msu_jscript/question_answer/rule_qa.js"></script>
4. Save the changes to the page and test your questions
FAQ
Q: How do I use these elements outside of ANGEL?
A: This would require you to download all the files linked at the top of this page and place them on the server in the location your website. To download the files, right-click on the link and choose "Save Target As" (Internet Explorer) or "Save Link As" (Mozilla Firefox). Then choose a save location and click "Save." Then, upload the files to your server. You may also need to edit the file paths inside the documents with the .js file extension. Then, you would need to call the script inside your pages.
Q: Why do my questions appear with no styling?
A: It is likely that the class names in the code have a typo in them, which means the code will be trying to reference a style that does not exist. Check for missing quotation marks, as well as extra ones. Make sure the class names are typed in lowercase letters.
Q: Why do I see HTML code on my page in the place of where my questions should be?
A: This usually happens when a tag is left open in the code for your page, meaning a < or > is missing in your code, and therefore it is not being interpreted properly. Check to make sure all your tags are closed and use the code example on this page as a reference.
|
