Skip to content
This repository was archived by the owner on Jan 17, 2019. It is now read-only.

Commit 590dafe

Browse files
ty-ty-
committed
Merge pull request #71 from ty-/master
Added information about quiz template, started checklist doc
2 parents 17f30ee + 8dfa87d commit 590dafe

File tree

3 files changed

+171
-10
lines changed

3 files changed

+171
-10
lines changed

‎templates/checklist/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
checklist
2+
---------
3+
4+
The checklist template shows how to send custom statements based on check and unchecke events on a jQuery Mobile checkbox widget group.

‎templates/checklist/js/functions.js

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -35,16 +35,6 @@ if ( actor == false ) {
3535
// Send a statement
3636
ADL.XAPIWrapper.sendStatement(stmt);
3737

38-
// Handle checkbox clicks -- basic no knowledge of context or checked
39-
$(":checkbox").change(function(event) {
40-
$checkbox = $(this);
41-
var checkboxID = $checkbox.attr("id");
42-
var checkboxName = $checkbox.siblings("label").text();
43-
var chapter = $("body").attr("data-chapter");
44-
var pageID = $.mobile.activePage.attr("id");
45-
checkboxClicked(chapter, pageID, checkboxID, checkboxName);
46-
});
47-
4838
});
4939
} // end silly else
5040

@@ -263,3 +253,15 @@ function createContext( parentChapter, parentPage, subParentActivity ) {
263253
}
264254
return baseContext;
265255
}
256+
257+
$( document ).ready(function() {
258+
// Handle checkbox clicks -- basic no knowledge of context or checked
259+
$(":checkbox").change(function(event) {
260+
$checkbox = $(this);
261+
var checkboxID = $checkbox.attr("id");
262+
var checkboxName = $checkbox.siblings("label").text();
263+
var chapter = $("body").attr("data-chapter");
264+
var pageID = $.mobile.activePage.attr("id");
265+
checkboxClicked(chapter, pageID, checkboxID, checkboxName);
266+
});
267+
});

‎templates/quiz/README.md

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
quiz
2+
----
3+
4+
Quizzes can be built from three types of inputs:
5+
6+
- Checklist (multiple choice selection)
7+
- Radio (single choice selection)
8+
- Text Box (string comparison)
9+
10+
The HTML is consists of jQuery Mobile Widgets, a ```gradeQuestion()``` function is triggered in the [quiz-functions.js](js/quiz-functions.js) file in an ```onclick``` attribute of the next button.
11+
12+
Answers for quizzes are defined in by an array ```CORRECT_QUIZ_ANSWERS```. The example below has answers that correspond with the input types listed above: checklist, radio, textbox.
13+
14+
15+
### Configuration
16+
17+
Most configuration is handled in the [quiz-functions.js](js/quiz-functions.js) file.
18+
19+
The quiz should have a unique ID that identifies the statements in the LRS, in this example, the moduleID is pulled from the [config.js](js/config.js) and we append a quiz specific string to it:
20+
21+
```js
22+
var quizID = moduleID + "chapters/05-quiz#quiz"
23+
var quizActivity = {
24+
"id": quizID,
25+
"definition": {
26+
"name": {
27+
"en-US": "xAPI for jQuery Mobile French Toast Demo quiz"
28+
}
29+
},
30+
"objectType": "Activity"
31+
};
32+
```
33+
34+
As mentioned above, the answers are defined in a javascript array:
35+
36+
```js
37+
var CORRECT_QUIZ_ANSWERS = [ [2,3,6], [4], "bread" ];
38+
```
39+
40+
41+
### Widgets
42+
43+
Lets dig a little deeper into these types with examples from the template.
44+
45+
46+
#### Checkboxes (multiple choice selection)
47+
48+
**HTML**:
49+
50+
```html
51+
<div data-role="content">
52+
<div class="infoblock">
53+
<h2>1. What ingredients are required to make french toast?</h2>
54+
</div>
55+
56+
<form id="p1_form">
57+
<fieldset data-role="controlgroup">
58+
<input type="checkbox" name="quiz-q1[]" id="q1-chocolate"><label for="q1-chocolate">Chocolate</label>
59+
<input type="checkbox" name="quiz-q1[]" id="q1-bread"><label for="q1-bread">Bread</label>
60+
<input type="checkbox" name="quiz-q1[]" id="q1-eggs"><label for="q1-eggs">Eggs</label>
61+
<input type="checkbox" name="quiz-q1[]" id="q1-hose"><label for="q1-hose">Fire Hose</label>
62+
<input type="checkbox" name="quiz-q1[]" id="q1-rice"><label for="q1-rice">Rice</label>
63+
<input type="checkbox" name="quiz-q1[]" id="q1-butter"><label for="q1-butter">Butter / Oil or Non-stick Spray</label>
64+
</fieldset>
65+
</form>
66+
67+
</div><!-- /content -->
68+
69+
<div data-role="footer" data-theme="b" data-position="fixed">
70+
<div data-role="navbar">
71+
<ul>
72+
<li><a href="../index.html#toc" data-theme="b" data-rel="back" data-icon="carat-l" data-iconpos="top" data-transition="slide" data-direction="reverse" data-ajax="false">Previous</a></li>
73+
<li><a onclick="gradeQuestion()" href="#p2" id="next" data-theme="b" data-icon="carat-r" data-iconpos="top" data-transition="slide" data-ajax="false">Next</a></li>
74+
</ul>
75+
</div><!-- /navbar -->
76+
</div><!-- /footer -->
77+
```
78+
79+
**Javascript**:
80+
81+
Make note of the ```onclick``` that is firing the javascript function to compare the user's answers to the ```CORRECT_QUIZ_ANSWERS``` array.
82+
83+
The answer array for this first question, has an array of ids that correspond with the index of the item in the list, ```[2,3,6]``` -- which translates into "bread, eggs, and butter" being the 2nd, 3rd and 6th list items.
84+
85+
86+
#### Radio Selection (single choice selection)
87+
88+
**HTML**:
89+
90+
```html
91+
<div data-role="content">
92+
<div class="infoblock">
93+
<h2>2. Which cooking tool is required to make french toast?</h2>
94+
</div>
95+
96+
<form id="p2_form">
97+
<fieldset data-role="controlgroup">
98+
<input type="radio" name="quiz-q2[]" id="q2-pot" value="A Pot"><label for="q2-pot">A Pot</label>
99+
<input type="radio" name="quiz-q2[]" id="q2-toaster" value="A Toaster"><label for="q2-toaster">A Toaster</label>
100+
<input type="radio" name="quiz-q2[]" id="q2-oven" value="An Oven"><label for="q2-oven">An Oven</label>
101+
<input type="radio" name="quiz-q2[]" id="q2-pan" value="A Pan or an electric skillet"><label for="q2-pan">A Pan or an electric skillet</label>
102+
<input type="radio" name="quiz-q2[]" id="q2-blender" value="A Blender"><label for="q2-blender">A Blender</label>
103+
</fieldset>
104+
</form>
105+
106+
</div><!-- /content -->
107+
108+
<div data-role="footer" data-theme="b" data-position="fixed">
109+
<div data-role="navbar">
110+
<ul>
111+
<li><a href="#p1" data-theme="b" data-rel="back" data-icon="carat-l" data-iconpos="top" data-transition="slide" data-direction="reverse" data-ajax="false">Previous</a></li>
112+
<li><a onclick="gradeQuestion()" href="#p3" id="next" data-theme="b" data-icon="carat-r" data-iconpos="top" data-transition="slide" data-ajax="false">Next</a></li>
113+
</ul>
114+
</div><!-- /navbar -->
115+
</div><!-- /footer -->
116+
```
117+
118+
**Javascript**:
119+
120+
Referencing the ```CORRECT_QUIZ_ANSWERS``` array, we'll notice the second item is ```[4]``` which means the 4th list item, "pan" as the correct answer.
121+
122+
123+
#### Text Box (string comparison)
124+
125+
**HTML**:
126+
127+
```html
128+
<div data-role="content">
129+
<div class="infoblock">
130+
<h2>3. What is the main ingredient of french toast?</h2>
131+
</div>
132+
133+
<form id="p3_form">
134+
<input type="text" data-clear-btn="true" name="quiz-q3[]" id="q3-text">
135+
</form>
136+
137+
</div><!-- /content -->
138+
139+
<div data-role="footer" data-theme="b" data-position="fixed">
140+
<div data-role="navbar">
141+
<ul>
142+
<li><a href="#p2" data-theme="b" data-rel="back" data-icon="carat-l" data-iconpos="top" data-transition="slide" data-direction="reverse" data-ajax="false">Previous</a></li>
143+
<li><a onclick="gradeQuestion();makeAssessment()" href="#results" id="results" data-theme="b" data-icon="carat-r" data-iconpos="top" data-transition="slide" data-ajax="false">Get Results</a></li>
144+
</ul>
145+
</div><!-- /navbar -->
146+
</div><!-- /footer -->
147+
```
148+
149+
**Javascript**:
150+
151+
Referencing the ```CORRECT_QUIZ_ANSWERS``` array, ```"bread"``` is the defined string, which is case-insensitive; "Bread" would also be a valid answer to the question.
152+
153+
As the last question in the quiz, one other function is called in the ```onclick``` of the "next" or "get results" button, ```makeAssessment()``` which will calculate a score based on the number of questions answered correctly.
154+
155+
Optionally, this function can also fire ```courseMastered()```. In this template, "mastered" is defined by having completed all the steps and scoring 100% on the quiz. This also displays a french toast master badge. This function can be customized to fit the needs of what "mastered" means in the context of your app.

0 commit comments

Comments
 (0)