View
111
Download
3
Category
Tags:
Preview:
DESCRIPTION
Citation preview
Super Session - South East Asia
Still early. Waking up the console…
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!
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
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)
Quiz in the Standard Theme
Quiz in Binarius Theme
Quiz in Essential Theme (out of the box)
Quiz in Ergo Theme
“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
“Less is More” Quiz format
http://elearning.3rdwavemedia.com/themes/ergo/
Choice of Theme for my placement test
Ergo Theme(commercial)
Quiz Walkthrough
Quiz Walkthrough (Google Chrome)
Quiz Walkthrough (Google Chrome)
Quiz Walkthrough -Grid Course Format
Quiz Walkthrough – Google Chrome
Quiz WalkthroughChanging the colors of
the clicked buttons - mousehover
Quiz Walkthrough – Google Chrome
Quiz WalkthroughChanging the colors of
the clicked buttons – Right-Clicking
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">
Showcase 1:Quiz Walkthrough
Introduction Screenand clickable
buttons
.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
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 */}
Quiz Walkthrough – Alternative color
Quiz Walkthrough – Alternative color
Quiz Walkthrough – help with images and text
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
Quiz Walkthrough – help screens and buttons
Quiz Walkthrough – help screens and buttons
Quiz Walkthrough – help screens and buttons
Useful JQuery Library – Easy to setup UI
http://www.queness.com/post/11029/smokejsjavascript-alert-system-replacementUseful JQuery Library – Easy to setup UI
Showcase 2: Multiple Choice
Questions
MCQsQuiz Walkthrough – MCQ Questions
Quiz Walkthrough – MCQ Questions (white bg)
Mouseover Quiz Question Number brings up the question context
https://moodle.org/mod/forum/discuss.php?d=230275
How to add a logo at the header and the footer of the attempt Page?
Quiz Walkthrough – Adding header and footer images
I edited (core code hack) /public_html/cefl/mod/quiz/renderer.php
Add a logo at the top and bottom of the attempt page
Showcase 3: Unanswered questions warning
Quiz Walkthrough – Unanswered questions
<input type="submit" name="next" value="Save and Next" onClick="return callValidation();" />
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
//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.
Part 2.1
Showcase 4: Single letter
gap-fill question
Closeup view
Quiz Walkthrough – Help screens with image and HTML tags
<div class="question_sample">…</tbody>
<tbody class="question_focus">…</tbody>
Color-codingVarious sections
Of a question
<div class="question_instruct"> … …
<tbody class="question_sample"> </tbody>
<tbody class="question_focus">
</tbody>
</div>
Color-coding various sections of a question
<div class="question_instruct"> …
<tbody class="question_sample"></tbody>
<tbody class="question_focus">
</tbody></div>
CSS CODE
Color-coding various sections of a question
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;}
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;}
What the code looks like
What the code looks like
<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
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
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.
…(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
Code’s giving me…
… a headache!
Pause forsome relief.
Better now? Okay!
Part 2.2
Quiz Walkthrough
Showcase 5: “AirmailLetter”gap-fill
question
Quiz Walkthrough - Mimicking a letter
Quiz Walkthrough - Mimicking a letter
Mimicking a letter – ShortAnswer code!
Mimicking a letter – ShortAnswer code!
<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!
*
*
Source: http://cssdeck.com/labs/airmail
How to get the Airmail special effect with CSS
#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}
Showcase 6:AbstractionAnd reducingdetail by usingMCH* andan accordiondesign
Part 2.3
*Multiple Choice Horizontal
Minimising detail with the Accordion concept
Minimising detail with the Accordion concept
Minimising detail with the Accordion concept
Minimising detail with the Accordion concept
Minimising detail with the Accordion concept
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
Flexible reading with a pop-up window link
{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
Minimising detail with the Accordion concept
Blog.calebnance.com
Minimising detail with the Accordion concept
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
Accordion HTML code
Accordion CSS code
Part 2.5
Showcase 7:
Gapfill and
color feedback
Gapfill and color feedback
Gapfill and color feedback
Gapfill and color feedback - code
q1660:32_sub1_answer
Gapfill and color feedback – input box name
name=“attract”readonly
Gapfill and color feedback – input box name
/* ---------- 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
/* ---------- 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
Part 2.5
Showcase 8:
Verticalfloatingsection
Part 2.6
Vertical Floating section
Vertical Floating section
Vertical Floating section – Chessbase example
Vertical Floating section – Chessbase example
Vertical Floating section – Code headache
Source: http://www.mindfiresolutions.com/Simple-floating-div-using-jQuery-1885.php
Vertical Floating section – Web resource
Source: http://www.mindfiresolutions.com/Simple-floating-div-using-jQuery-1885.php
Vertical Floating section – Web resource
Source: http://simianstudios.com/portamento/
Vertical Floating section – Web resource
Source: http://simianstudios.com/portamento/
Vertical Floating section – Web resource
Part 2.8
Showcase 9:
Complex UI
Part 2.8
Quiz Walkthrough – Complex UI
Quiz Walkthrough – Complex UI
Quiz Walkthrough – Complex UI
StackOverflow.com resource
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>
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
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
Moodle quiz type with regexhttp://stackoverflow.com/questions/19827575/moodle-quiz-type-with-regex
Some usefulMoodle.org forum posts
How to style the colour of quiz buttons according to their function
https://moodle.org/mod/forum/discuss.php?d=237558
Drag-and-drop, words to sentences (ddwtos) with multiline answers
https://moodle.org/mod/forum/discuss.php?d=239194
Create a multicolumn Summary of Attempthttps://moodle.org/mod/forum/discuss.php?d=244735
Add a Progress Bar
https://moodle.org/mod/forum/discuss.php?d=259159
Quiz question section with ruled-paper background effect via CSS3
https://moodle.org/mod/forum/discuss.php?d=238023
How to adjust width of the quiz content areahttps://moodle.org/mod/forum/discuss.php?d=237589
The “End Quiz” buttonhttps://moodle.org/mod/forum/discuss.php?d=217594
How to hide the quiz navigation blockhttps://moodle.org/mod/forum/discuss.php?d=244484
Show all quiz questions in one page at a reviewhttps://moodle.org/mod/forum/discuss.php?d=238979
Hide the Description Question types in Summaryhttps://moodle.org/mod/forum/discuss.php?d=242893
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
https://moodle.org/mod/forum/discuss.php?d=238102Hide the custom menu items during a quiz
#page-mod-quiz-attempt .navbar { display:none;}
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;}
How to change the background color?https://moodle.org/mod/forum/discuss.php?d=237950
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.
Remove gap between title and options (MCQ)https://moodle.org/mod/forum/discuss.php?d=239613
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
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.
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
http://docs.moodle.org/dev/Using_jQuery_with_Moodle_2.0#jQuery_support_in_Moodle_2.5
APPENDIX: Enabling Jquery in Moodle 2.x
APPENDIX - List of MoodleQuestion Types installed on CEFL’S Moodle Site.
http://www.youtube.com/watch?v=57i3rhT-tKI
THANK YOU
Recommended