frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)
DESCRIPTION
TRANSCRIPT
![Page 1: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/1.jpg)
Super Session - South East Asia
Still early. Waking up the console…
![Page 2: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/2.jpg)
Super Session - South East AsiaSoup up your Moodle Quiz with Javascript, CSS
and JQuery magicSunday 18/5/2014, 09:30am, UTC+8
Initiating boot sequence…launching soon!
![Page 3: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/3.jpg)
How I enhanced the look and feel of the standard Moodle quiz to create a feature-rich English placement test
by using Javascript, CSS and a dose of JQuery.
By Frankie KamMalaysia
18/5/2014
Super Session - South East AsiaSoup up your Moodle Quiz with Javascript, CSS
and JQuery magic
![Page 4: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/4.jpg)
The Challenge
“I was asked to create an online quiz where the questions were multi-format and were a mixture of multiple-choice and gap-fill questions. The quiz had to mimic the physical placement test in terms of format.This presentation is to share what I did and what I learnt over three months from September 2013 to the beginning of December 2013” (Frankie Kam)
![Page 5: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/5.jpg)
Quiz in the Standard Theme
![Page 6: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/6.jpg)
Quiz in Binarius Theme
![Page 7: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/7.jpg)
Quiz in Essential Theme (out of the box)
![Page 8: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/8.jpg)
Quiz in Ergo Theme
![Page 9: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/9.jpg)
“The primary focus was clarity, readability and to decrease cognitive load as the activity is often done under pressure. We also got load times down and made it mobile friendly too”
“Less is More” Quiz format
![Page 10: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/10.jpg)
“Less is More” Quiz format
![Page 11: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/11.jpg)
http://elearning.3rdwavemedia.com/themes/ergo/
Choice of Theme for my placement test
![Page 12: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/12.jpg)
Ergo Theme(commercial)
![Page 13: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/13.jpg)
Quiz Walkthrough
![Page 14: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/14.jpg)
Quiz Walkthrough (Google Chrome)
![Page 15: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/15.jpg)
Quiz Walkthrough (Google Chrome)
![Page 16: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/16.jpg)
Quiz Walkthrough -Grid Course Format
![Page 17: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/17.jpg)
Quiz Walkthrough – Google Chrome
![Page 18: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/18.jpg)
Quiz WalkthroughChanging the colors of
the clicked buttons - mousehover
![Page 19: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/19.jpg)
Quiz Walkthrough – Google Chrome
![Page 20: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/20.jpg)
Quiz WalkthroughChanging the colors of
the clicked buttons – Right-Clicking
![Page 21: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/21.jpg)
CSSinput[type=submit] {background:#96C73A; color:#fff; cursor:pointer}input[type=submit]:hover {background:#E5B400; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px}
HTML<input type="submit" value="Attempt quiz now">
![Page 22: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/22.jpg)
Showcase 1:Quiz Walkthrough
Introduction Screenand clickable
buttons
![Page 23: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/23.jpg)
.que .formulation { background-color: #E4F9AE; /* Rounds the corner */ display: block; margin: 4px; padding: 4px 4px 4px 4px; list-style: circle; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #000;}
Quiz Walkthrough – background and corners
![Page 24: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/24.jpg)
How to change the background color?https://moodle.org/mod/forum/discuss.php?d=237950
It's ".que .formulation" to override. Just use Chrome Developer Tools - walk in the park....
.que .formulation { background: #ffffff; /* White background for the Quiz question area section */}
![Page 25: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/25.jpg)
Quiz Walkthrough – Alternative color
![Page 26: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/26.jpg)
Quiz Walkthrough – Alternative color
![Page 27: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/27.jpg)
Quiz Walkthrough – help with images and text
![Page 28: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/28.jpg)
Quiz Walkthrough – help with images and textfunction help_saveandnext() {
smoke.alert("<span class='bolder'>About the Save and Next button</span><span class='smalleremptyline'><br></span>The …
<img class='textmiddle' style='padding:1px;border:thin solid black;' src='http://www.moodurian.com/cefl/pix/ quiz_navigate.png'><font color='#E52A33'> <br>Click the OK button to continue.</font><span><br></span>", {}, function(){}); }
A versatile alternativeAlert with Embedded Javascriptcode and HTML tags
![Page 29: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/29.jpg)
Quiz Walkthrough – help screens and buttons
![Page 30: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/30.jpg)
Quiz Walkthrough – help screens and buttons
![Page 31: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/31.jpg)
Quiz Walkthrough – help screens and buttons
![Page 32: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/32.jpg)
Useful JQuery Library – Easy to setup UI
![Page 33: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/33.jpg)
http://www.queness.com/post/11029/smokejsjavascript-alert-system-replacementUseful JQuery Library – Easy to setup UI
![Page 34: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/34.jpg)
Showcase 2: Multiple Choice
Questions
![Page 35: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/35.jpg)
MCQsQuiz Walkthrough – MCQ Questions
![Page 36: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/36.jpg)
Quiz Walkthrough – MCQ Questions (white bg)
![Page 37: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/37.jpg)
Mouseover Quiz Question Number brings up the question context
https://moodle.org/mod/forum/discuss.php?d=230275
![Page 38: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/38.jpg)
How to add a logo at the header and the footer of the attempt Page?
Quiz Walkthrough – Adding header and footer images
![Page 39: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/39.jpg)
I edited (core code hack) /public_html/cefl/mod/quiz/renderer.php
Add a logo at the top and bottom of the attempt page
![Page 40: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/40.jpg)
Showcase 3: Unanswered questions warning
![Page 41: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/41.jpg)
Quiz Walkthrough – Unanswered questions
<input type="submit" name="next" value="Save and Next" onClick="return callValidation();" />
![Page 42: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/42.jpg)
function callValidation() { var names1 = {}; var okay1 = false; $('input:radio').each(function() { // find unique names names1[$(this).attr('name')] = true;}); var count = 0; $.each(names1, function() { // then count them count++; }); if(count == 0) okay1=true; /* No inputs, so no need to check! */ else if($('input:radio:checked').length == count) { okay1 = true; } else{ /* Uses smoke.css and smoke.js */ smoke.alert("<span class='bolder'>Warning!</span><p> This page has "+(count-$('input:radio:checked').length)+" unanswered multiple choice questions.", {}, function(){ // oh what now? }); okay1 = false; }//code is continued on the next slide
Quiz Walkthrough – Unanswered
questions
![Page 43: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/43.jpg)
//code continues from the previous slide var names2 = {}; var okay2 = true; $('input:text').each(function() { // find unique names names2[$(this).attr('name')] = true; }); var count2 = 0; $.each(names2, function() { // then count them count2++; }); if(count2 == 0) okay2=true; /* No inputs, so no need to check! */
var strv; var gap_counter=-1; $('input:text').each(function() { $strv = $(this).val(); $strv=$strv.trim(); if($strv == "") { okay2=false; gap_counter++; } }); if(okay2==false && gap_counter>0) {
smoke.alert("<span class='bolder'>Warning!</span><p> This page has "+gap_counter+" gap(s).", {}, function(){ // oh what now? } ); okay2=false; } else okay2=true; return true; /* Frankie 3rd December 2013 */ }//code is continued on next slide
Quiz Walkthrough – Unanswered
questions
Buried in code.
![Page 44: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/44.jpg)
Part 2.1
Showcase 4: Single letter
gap-fill question
![Page 45: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/45.jpg)
Closeup view
![Page 46: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/46.jpg)
Quiz Walkthrough – Help screens with image and HTML tags
![Page 47: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/47.jpg)
<div class="question_sample">…</tbody>
<tbody class="question_focus">…</tbody>
Color-codingVarious sections
Of a question
![Page 48: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/48.jpg)
<div class="question_instruct"> … …
<tbody class="question_sample"> </tbody>
<tbody class="question_focus">
</tbody>
</div>
Color-coding various sections of a question
![Page 49: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/49.jpg)
<div class="question_instruct"> …
<tbody class="question_sample"></tbody>
<tbody class="question_focus">
</tbody></div>
CSS CODE
Color-coding various sections of a question
![Page 50: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/50.jpg)
HTML<tbody class="question_sample"> … </tbody>
CSS.question_sample { display: block; background-color: #E3F9CE; margin: 4px 4px 4px 4px; padding: 10px 10px 10px 10px; list-style: circle; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #000;}
![Page 51: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/51.jpg)
HTML<tbody class="question_focus">…</tbody>
CSS.question_focus { display: block; background-color: #FFCAA8; margin: 4px; padding: 4px 4px 4px 4px; list-style: circle; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #000;}
![Page 52: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/52.jpg)
What the code looks like
![Page 53: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/53.jpg)
What the code looks like
![Page 54: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/54.jpg)
<strong>T</strong>{1:SHORTANSWER:%100%e#} {1:SHORTANSWER:%100%a#}
Sources http://docs.moodle.org/22/en/Embedded_Answers_(Cloze)_question_type http://www.w3schools.com/tags/tag_input.asphttp://moodurian.blogspot.com/2013/09/how-i-managed-to-allow-input-of-only-1.html
Solving the problem of single-character input in the
Input boxes
![Page 55: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/55.jpg)
I modified the /public_html/moodle/question/type/multianswer/renderer.php
class qtype_multianswer_textfield_renderer extends … { public function subquestion(…) { … // Work out a good input field size. // Assume each correct answer in an input box of this Cloze question is a character. $AllSingleInput = true; /* Test each correct answer in turn. */
foreach ($subq->answers as $ans) { $size = strlen(trim($ans->answer)); if($size > 1) { $AllSingleInput = false; break; } } //Are all answers single character fields?
if($AllSingleInput === true) { $size = 1; //Put the arbitary maximum number of characters to 1.
$maxlength = 1;
} else {
Allowing single-character entry inside input boxes
![Page 56: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/56.jpg)
class qtype_multianswer_textfield_renderer extends … { public function subquestion(…) { … // Work out a good input field size.
/* Assume that each correct answer in an input box of this Cloze question is 1 character. */ $AllSingleInput = true;
/* Test each correct answer in turn. */ foreach ($subq->answers as $ans) { $size = strlen(trim($ans->answer)); if($size > 1) { $AllSingleInput = false; break; } } //Are all answers single character fields? if($AllSingleInput === true) { $size = 1; //Put the arbitary maximum number of characters to 1. $maxlength = 1; } else { //If the logic flows here, this means that the cloze question //does not consist of ALL-single character input boxes. // Work out a good input field size. $size = max(1, textlib::strlen(trim($response)) + 1); foreach ($subq->answers as $ans) {
<strong>T</strong>{1:SHORTANSWER:%100%e#} {1:SHORTANSWER:%100%a#}
On each foreach iteration, the value of the current element is assigned to $ans and the internal array pointer is advanced by one. Note: -> is used to access an object method or property.
![Page 57: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/57.jpg)
…(continued from previous page)else { //If logic flows in here, this means the cloze question has varied-sized input boxes // Work out a good input field size. $size = max(1, textlib::strlen(trim($response)) + 1); foreach ($subq->answers as $ans) { $size = max($size, textlib::strlen(trim($ans->answer))); } //Put the maxlength attribute of an input box to $size. I.e., the max length. */ $maxlength = $size; } $inputattributes = array( … 'size' => $size, /* Set the input box’s maxlength attribute to $maxlength! */ 'maxlength' => $maxlength); … return $output; }}
Allowing single-character entry inside input boxes
![Page 58: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/58.jpg)
Code’s giving me…
![Page 59: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/59.jpg)
… a headache!
![Page 60: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/60.jpg)
Pause forsome relief.
![Page 61: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/61.jpg)
Better now? Okay!
![Page 62: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/62.jpg)
Part 2.2
Quiz Walkthrough
Showcase 5: “AirmailLetter”gap-fill
question
![Page 63: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/63.jpg)
Quiz Walkthrough - Mimicking a letter
![Page 64: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/64.jpg)
Quiz Walkthrough - Mimicking a letter
![Page 65: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/65.jpg)
Mimicking a letter – ShortAnswer code!
![Page 66: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/66.jpg)
Mimicking a letter – ShortAnswer code!
![Page 67: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/67.jpg)
<p style="text-align: justify;"><span style="font-size: large; font-family: 'Century Gothic',futura;">Thank you for helping <span class="helphint"><input id="inputExample4" type="text" name=“me" value="me" disabled="disabled" /></span> with my English.
You are {1:SA:=in~=travelleq} really </span><span style="font-size: large; font-family: 'Century Gothic',futura;">good teacher! I enjoyed staying with you
{1:SA:=a~=near~=travelleq} London. </span></p>
*Not theactual answer!
*
*
![Page 68: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/68.jpg)
Source: http://cssdeck.com/labs/airmail
How to get the Airmail special effect with CSS
![Page 69: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/69.jpg)
#ribbon { position: absolute; top: 4px; left: 8px; width: 7px; height: 1px; background: #c03c41; /* Skew */ -webkit-transform: skew(45deg); -moz-transform: skew(45deg); -o-transform: skew(45deg); transform: skew(45deg); /* Repeat */ box-shadow: 0px 0px 0 4px #c03c41, 30px 0px 0 4px #4567ae, 60px 0px 0 4px #c03c41, 90px 0px 0 4px #4567ae, 120px 0px 0 4px #c03c41, 150px 0px 0 4px #4567ae, 180px 0px 0 4px #c03c41, 210px 0px 0 4px #4567ae, 240px 0px 0 4px #c03c41, 270px 0px 0 4px #4567ae, 300px 0px 0 4px #c03c41, 330px 0px 0 4px #4567ae, 360px 0px 0 4px #4567ae, 390px 0px 0 4px #c03c41}
![Page 70: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/70.jpg)
Showcase 6:AbstractionAnd reducingdetail by usingMCH* andan accordiondesign
Part 2.3
*Multiple Choice Horizontal
![Page 71: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/71.jpg)
Minimising detail with the Accordion concept
![Page 72: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/72.jpg)
Minimising detail with the Accordion concept
![Page 73: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/73.jpg)
Minimising detail with the Accordion concept
![Page 74: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/74.jpg)
Minimising detail with the Accordion concept
![Page 75: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/75.jpg)
Minimising detail with the Accordion concept
![Page 76: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/76.jpg)
https://moodle.org/mod/forum/discuss.php?d=240818
Minimising detail with the Accordion concept
Hacking theThe Cloze
horizontal (MCH) from a
1x4 format to a 2x2 format
![Page 77: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/77.jpg)
Flexible reading with a pop-up window link
![Page 78: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/78.jpg)
{1:MCH:Warn parents not to expect too much from their children.~=Advertise schools that teach people how to cook.~Describe how some children spend their spare time.~Explain why parents want to know more about cooking.}
Horizontal Multiple Choice Code
![Page 79: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/79.jpg)
Minimising detail with the Accordion concept
Blog.calebnance.com
![Page 80: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/80.jpg)
Minimising detail with the Accordion concept
![Page 81: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/81.jpg)
Excellent. Simple and lightweight!http://blog.calebnance.com/jquery/very-easy-accordion-with-jquery-from-scratch.htmlInteractivehttp://codepen.io/calebnance/pen/nbwGh
Minimising detail with the Accordion concept
![Page 82: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/82.jpg)
Accordion HTML code
![Page 83: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/83.jpg)
Accordion CSS code
![Page 84: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/84.jpg)
Part 2.5
Showcase 7:
Gapfill and
color feedback
![Page 85: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/85.jpg)
Gapfill and color feedback
![Page 86: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/86.jpg)
Gapfill and color feedback
![Page 87: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/87.jpg)
Gapfill and color feedback - code
![Page 88: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/88.jpg)
q1660:32_sub1_answer
Gapfill and color feedback – input box name
![Page 89: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/89.jpg)
name=“attract”readonly
Gapfill and color feedback – input box name
![Page 90: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/90.jpg)
/* ---------- attract ------------------------- */$("input[id$=32_sub1_answer]").focus(function(){ $("#attract").css("background-color","#FFFFA7"); });
$("input[id$=32_sub1_answer]").focusout(function(){ $("#attract").css("background-color","#AEE4F9"); });
JQuery code detects if an input field is clicked, highlights the clue word
Gapfill and color feedback – JQuery solution
![Page 91: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/91.jpg)
/* ---------- tour ---------------------------- */$("input[id$=32_sub2_answer]").focus(function(){ $("#tour").css("background-color","#FFFFA7"); });
$("input[id$=32_sub2_answer]").focusout(function(){ $("#tour").css("background-color","#AEE4F9"); });
JQuery code detects if an input field is clicked, highlights the clue word
Gapfill and color feedback – JQuery solution
![Page 92: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/92.jpg)
Part 2.5
Showcase 8:
Verticalfloatingsection
![Page 93: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/93.jpg)
Part 2.6
Vertical Floating section
![Page 94: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/94.jpg)
Vertical Floating section
![Page 95: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/95.jpg)
Vertical Floating section – Chessbase example
![Page 96: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/96.jpg)
Vertical Floating section – Chessbase example
![Page 97: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/97.jpg)
Vertical Floating section – Code headache
![Page 98: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/98.jpg)
Source: http://www.mindfiresolutions.com/Simple-floating-div-using-jQuery-1885.php
Vertical Floating section – Web resource
![Page 99: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/99.jpg)
Source: http://www.mindfiresolutions.com/Simple-floating-div-using-jQuery-1885.php
Vertical Floating section – Web resource
![Page 100: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/100.jpg)
Source: http://simianstudios.com/portamento/
Vertical Floating section – Web resource
![Page 101: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/101.jpg)
Source: http://simianstudios.com/portamento/
Vertical Floating section – Web resource
![Page 102: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/102.jpg)
Part 2.8
Showcase 9:
Complex UI
![Page 103: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/103.jpg)
Part 2.8
Quiz Walkthrough – Complex UI
![Page 104: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/104.jpg)
Quiz Walkthrough – Complex UI
![Page 105: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/105.jpg)
![Page 106: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/106.jpg)
Quiz Walkthrough – Complex UI
![Page 107: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/107.jpg)
StackOverflow.com resource
![Page 108: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/108.jpg)
The id of the input box in my Moodle quiz keeps changing! You know, the kinda id with a
colon insidehttp://stackoverflow.com/questions/20239428/the-id-of-the-input-box-in-my-moodle-quiz-keeps-changing-you-know-the-kinda-id
<input id="q1526:32_sub1_answer" type="text" maxlength="14" size="14" name="q1526:32_sub1_answer"></input>
![Page 109: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/109.jpg)
Type a word from the keyboard and store each letter into a series of multiple input text boxes
http://stackoverflow.com/questions/19557517/type-a-word-from-the-keyboard-and-store-each-letter-into-a-series-of-multiple-in
![Page 110: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/110.jpg)
Automatically generate a iPad tap event immediately after an input box is in focus
http://stackoverflow.com/questions/20110766/automatically-generate-a-ipad-tap-event-immediately-after-an-input-box-is-in-foc
![Page 111: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/111.jpg)
Moodle quiz type with regexhttp://stackoverflow.com/questions/19827575/moodle-quiz-type-with-regex
![Page 112: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/112.jpg)
Some usefulMoodle.org forum posts
![Page 113: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/113.jpg)
How to style the colour of quiz buttons according to their function
https://moodle.org/mod/forum/discuss.php?d=237558
![Page 114: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/114.jpg)
Drag-and-drop, words to sentences (ddwtos) with multiline answers
https://moodle.org/mod/forum/discuss.php?d=239194
![Page 115: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/115.jpg)
Create a multicolumn Summary of Attempthttps://moodle.org/mod/forum/discuss.php?d=244735
![Page 116: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/116.jpg)
Add a Progress Bar
https://moodle.org/mod/forum/discuss.php?d=259159
![Page 117: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/117.jpg)
Quiz question section with ruled-paper background effect via CSS3
https://moodle.org/mod/forum/discuss.php?d=238023
![Page 118: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/118.jpg)
![Page 119: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/119.jpg)
How to adjust width of the quiz content areahttps://moodle.org/mod/forum/discuss.php?d=237589
![Page 120: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/120.jpg)
The “End Quiz” buttonhttps://moodle.org/mod/forum/discuss.php?d=217594
![Page 121: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/121.jpg)
How to hide the quiz navigation blockhttps://moodle.org/mod/forum/discuss.php?d=244484
![Page 122: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/122.jpg)
Show all quiz questions in one page at a reviewhttps://moodle.org/mod/forum/discuss.php?d=238979
![Page 123: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/123.jpg)
Hide the Description Question types in Summaryhttps://moodle.org/mod/forum/discuss.php?d=242893
![Page 124: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/124.jpg)
Is there a way to hide the custom menu items whenever a quiz is being conducted?
https://moodle.org/mod/forum/discuss.php?d=238102
![Page 125: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/125.jpg)
https://moodle.org/mod/forum/discuss.php?d=238102Hide the custom menu items during a quiz
#page-mod-quiz-attempt .navbar { display:none;}
![Page 126: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/126.jpg)
https://moodle.org/mod/forum/discuss.php?d=237589
How to extend the width of the quiz question area
.que .info {float: none;width: auto;}
.que .info > div {margin-left: 10px;margin-right: 10px;}
.que .info > div {display: inline;}
.que .content {margin: 0 0 0 0;width: auto;}
![Page 127: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/127.jpg)
How to change the background color?https://moodle.org/mod/forum/discuss.php?d=237950
![Page 128: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/128.jpg)
How do I use CSS to hide the information section of a Description question type?
https://moodle.org/mod/forum/discuss.php?d=240711
This section was initiallya description questiontype where I had embeddedthis image of a red watermark.
![Page 129: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/129.jpg)
Remove gap between title and options (MCQ)https://moodle.org/mod/forum/discuss.php?d=239613
![Page 130: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/130.jpg)
FOUR things to consider
The following are worthy of attention:(1) Catering to color-blind users (assessibility)(2) Visually appealing does not necessarily equal
to being practical. Server load when 100s of students take the quiz simultaneously?
(3) Will it work on sites with responsive designs(4) Javascript/JQuery versus YUI on Moodle.org
and in future iterations of Moodle software
![Page 131: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/131.jpg)
In Closing
To create unusual Quizzes, it takes the following:(1) Hard work(2) Determination(3) Imagination(4) Lots of Moodle.org, Stackoverflow.com and
WWW surfing and forum postings(5) Spend more time brushing up on CSS,
Javascript, JQuery and YUI.
![Page 132: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/132.jpg)
http://docs.moodle.org/dev/Using_jQuery_with_Moodle_2.0#jQuery_support_in_Moodle_2.5
APPENDIX: How to Enable Jquery in Moodle 2.x
![Page 133: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/133.jpg)
http://docs.moodle.org/dev/Using_jQuery_with_Moodle_2.0#jQuery_support_in_Moodle_2.5
APPENDIX: Enabling Jquery in Moodle 2.x
![Page 134: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/134.jpg)
APPENDIX - List of MoodleQuestion Types installed on CEFL’S Moodle Site.
![Page 135: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/135.jpg)
http://www.youtube.com/watch?v=57i3rhT-tKI
![Page 136: Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)](https://reader035.vdocuments.mx/reader035/viewer/2022081414/54c843054a795965098b457e/html5/thumbnails/136.jpg)
THANK YOU