Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)

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



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







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


Blog.calebnance.com


Excellent. Simple and lightweight!http://blog.calebnance.com/jquery/very-easy-accordion-with-jquery-from-scratch.htmlInteractivehttp://codepen.io/calebnance/pen/nbwGh


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


Source: http://simianstudios.com/portamento/


Source: http://simianstudios.com/portamento/


Part 2.8

Showcase 9:

Complex UI

Part 2.8

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


Drag-and-drop, words to sentences (ddwtos) with multiline answers


Create a multicolumn Summary of Attempthttps://moodle.org/mod/forum/discuss.php?d=244735

Add a Progress Bar


Quiz question section with ruled-paper background effect via CSS3


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=238102Hide the custom menu items during a quiz

#page-mod-quiz-attempt .navbar { display:none;}


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?


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

Documents

Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014)