Frankie kam soup up   i moot quiz with javascript css j-query (15th may 2014)
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 551 views

 

Statistics

Views

Total Views
551
Views on SlideShare
540
Embed Views
11

Actions

Likes
0
Downloads
4
Comments
0

2 Embeds 11

http://moodurian.blogspot.com 9
https://www.blogger.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Super Session - South East Asia Still early. Waking up the console…
  • Super Session - South East Asia Soup up your Moodle Quiz with Javascript, CSS and JQuery magic Sunday 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 Kam Malaysia 18/5/2014 Super Session - South East Asia Soup up your Moodle Quiz with Javascript, CSS and JQuery magic
  • The Challenge “Iwas 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 Walkthrough Changing the colors of the clicked buttons - mousehover
  • Quiz Walkthrough – Google Chrome
  • Quiz Walkthrough Changing the colors of the clicked buttons – Right-Clicking
  • CSS input[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 Screen and 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 t
  • Quiz Walkthrough – help with images and text function 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 alternative Alert with Embedded Javascript code 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-replacement Useful JQuery Library – Easy to setup UI
  • Showcase 2: Multiple Choice Questions
  • MCQs Quiz 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-coding Various 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.asp http://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. <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 for some reli
  • Better now? Okay!
  • Part 2.2 Quiz Walkthrough Showcase 5: “Airmail Letter” 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 the actual 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: Abstraction And reducing detail by using MCH* and an accordion design 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 the The 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.html Interactive http://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: Vertical floating section
  • 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 inside http://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 regex http://stackoverflow.com/questions/19827575/moodle-quiz-type-with- regex
  • Some useful Moodle.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 Attempt https://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 area https://moodle.org/mod/forum/discuss.php?d=237589
  • The “End Quiz” button https://moodle.org/mod/forum/discuss.php?d=217594
  • How to hide the quiz navigation block https://moodle.org/mod/forum/discuss.php?d=244484
  • Show all quiz questions in one page at a review https://moodle.org/mod/forum/discuss.php?d=238979
  • Hide the Description Question types in Summary https://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=238102 Hide 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 initially a description question type where I had embedded this 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 Moodle Question Types installed on CEFL’S Moodle Site.
  • http://www.youtube.com/watch?v=57i3rhT-tKI
  • THANK YOU