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

3,571 views
3,509 views

Published on

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
3,571
On SlideShare
0
From Embeds
0
Number of Embeds
2,587
Actions
Shares
0
Downloads
6
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Super Session - South East Asia Still early. Waking up the console…
  2. 2. 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!
  3. 3. 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
  4. 4. 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)
  5. 5. Quiz in the Standard Theme
  6. 6. Quiz in Binarius Theme
  7. 7. Quiz in Essential Theme (out of the box)
  8. 8. Quiz in Ergo Theme
  9. 9. “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
  10. 10. “Less is More” Quiz format
  11. 11. http://elearning.3rdwavemedia.com/themes/ergo/ Choice of Theme for my placement test
  12. 12. Ergo Theme (commercial)
  13. 13. Quiz Walkthrough
  14. 14. Quiz Walkthrough (Google Chrome)
  15. 15. Quiz Walkthrough (Google Chrome)
  16. 16. Quiz Walkthrough - Grid Course Format
  17. 17. Quiz Walkthrough – Google Chrome
  18. 18. Quiz Walkthrough Changing the colors of the clicked buttons - mousehover
  19. 19. Quiz Walkthrough – Google Chrome
  20. 20. Quiz Walkthrough Changing the colors of the clicked buttons – Right-Clicking
  21. 21. 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">
  22. 22. Showcase 1: Quiz Walkthrough Introduction Screen and clickable buttons
  23. 23. .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
  24. 24. 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 */ }
  25. 25. Quiz Walkthrough – Alternative color
  26. 26. Quiz Walkthrough – Alternative color
  27. 27. Quiz Walkthrough – help with images and t
  28. 28. 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
  29. 29. Quiz Walkthrough – help screens and buttons
  30. 30. Quiz Walkthrough – help screens and buttons
  31. 31. Quiz Walkthrough – help screens and buttons
  32. 32. Useful JQuery Library – Easy to setup UI
  33. 33. http://www.queness.com/post/11029/smokejsjavascript-alert-system-replacement Useful JQuery Library – Easy to setup UI
  34. 34. Showcase 2: Multiple Choice Questions
  35. 35. MCQs Quiz Walkthrough – MCQ Questions
  36. 36. Quiz Walkthrough – MCQ Questions (white bg)
  37. 37. Mouseover Quiz Question Number brings up the question context https://moodle.org/mod/forum/discuss.php?d=230275
  38. 38. How to add a logo at the header and the footer of the attempt Page? Quiz Walkthrough – Adding header and footer images
  39. 39. I edited (core code hack) /public_html/cefl/mod/quiz/renderer.php Add a logo at the top and bottom of the attempt page
  40. 40. Showcase 3: Unanswered questions warning
  41. 41. Quiz Walkthrough – Unanswered questions <input type="submit" name="next" value="Save and Next" onClick="return callValidation();" />
  42. 42. 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
  43. 43. //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.
  44. 44. Part 2.1 Showcase 4: Single letter gap-fill question
  45. 45. Closeup view
  46. 46. Quiz Walkthrough – Help screens with image and HTML tags
  47. 47. <div class="question_sample"> … </tbody> <tbody class="question_focus"> … </tbody> Color-coding Various sections Of a question
  48. 48. <div class="question_instruct"> … … <tbody class="question_sample"> </tbody> <tbody class="question_focus"> </tbody> </div> Color-coding various sections of a question
  49. 49. <div class="question_instruct"> … <tbody class="question_sample"> </tbody> <tbody class="question_focus"> </tbody> </div> CSS CODE Color-coding various sections of a question
  50. 50. 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; }
  51. 51. 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; }
  52. 52. What the code looks like
  53. 53. What the code looks like
  54. 54. <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
  55. 55. 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
  56. 56. 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.
  57. 57. …(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
  58. 58. Code’s giving me…
  59. 59. … a headache!
  60. 60. Pause for some reli
  61. 61. Better now? Okay!
  62. 62. Part 2.2 Quiz Walkthrough Showcase 5: “Airmail Letter” gap-fill question
  63. 63. Quiz Walkthrough - Mimicking a letter
  64. 64. Quiz Walkthrough - Mimicking a letter
  65. 65. Mimicking a letter – ShortAnswer code!
  66. 66. Mimicking a letter – ShortAnswer code!
  67. 67. <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! * *
  68. 68. Source: http://cssdeck.com/labs/airmail How to get the Airmail special effect with CSS
  69. 69. #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 }
  70. 70. Showcase 6: Abstraction And reducing detail by using MCH* and an accordion design Part 2.3 *Multiple Choice Horizontal
  71. 71. Minimising detail with the Accordion concept
  72. 72. Minimising detail with the Accordion concept
  73. 73. Minimising detail with the Accordion concept
  74. 74. Minimising detail with the Accordion concept
  75. 75. Minimising detail with the Accordion concept
  76. 76. 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
  77. 77. Flexible reading with a pop-up window link
  78. 78. {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
  79. 79. Minimising detail with the Accordion concept Blog.calebnance.com
  80. 80. Minimising detail with the Accordion concept
  81. 81. 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
  82. 82. Accordion HTML code
  83. 83. Accordion CSS code
  84. 84. Part 2.5 Showcase 7: Gapfill and color feedback
  85. 85. Gapfill and color feedback
  86. 86. Gapfill and color feedback
  87. 87. Gapfill and color feedback - code
  88. 88. q1660:32_sub1_answer Gapfill and color feedback – input box name
  89. 89. name=“attract” readonly Gapfill and color feedback – input box name
  90. 90. /* ---------- 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
  91. 91. /* ---------- 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
  92. 92. Part 2.5 Showcase 8: Vertical floating section
  93. 93. Part 2.6 Vertical Floating section
  94. 94. Vertical Floating section
  95. 95. Vertical Floating section – Chessbase example
  96. 96. Vertical Floating section – Chessbase example
  97. 97. Vertical Floating section – Code headache
  98. 98. Source: http://www.mindfiresolutions.com/Simple-floating-div-using-jQuery-1885.php Vertical Floating section – Web resource
  99. 99. Source: http://www.mindfiresolutions.com/Simple-floating-div-using-jQuery-1885.php Vertical Floating section – Web resource
  100. 100. Source: http://simianstudios.com/portamento/ Vertical Floating section – Web resource
  101. 101. Source: http://simianstudios.com/portamento/ Vertical Floating section – Web resource
  102. 102. Part 2.8 Showcase 9: Complex UI
  103. 103. Part 2.8 Quiz Walkthrough – Complex UI
  104. 104. Quiz Walkthrough – Complex UI
  105. 105. Quiz Walkthrough – Complex UI
  106. 106. StackOverflow.com resource
  107. 107. 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>
  108. 108. 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
  109. 109. 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
  110. 110. Moodle quiz type with regex http://stackoverflow.com/questions/19827575/moodle-quiz-type-with- regex
  111. 111. Some useful Moodle.org forum posts
  112. 112. How to style the colour of quiz buttons according to their function https://moodle.org/mod/forum/discuss.php?d=237558
  113. 113. Drag-and-drop, words to sentences (ddwtos) with multiline answers https://moodle.org/mod/forum/discuss.php?d=239194
  114. 114. Create a multicolumn Summary of Attempt https://moodle.org/mod/forum/discuss.php?d=244735
  115. 115. Add a Progress Bar https://moodle.org/mod/forum/discuss.php?d=259159
  116. 116. Quiz question section with ruled-paper background effect via CSS3 https://moodle.org/mod/forum/discuss.php?d=238023
  117. 117. How to adjust width of the quiz content area https://moodle.org/mod/forum/discuss.php?d=237589
  118. 118. The “End Quiz” button https://moodle.org/mod/forum/discuss.php?d=217594
  119. 119. How to hide the quiz navigation block https://moodle.org/mod/forum/discuss.php?d=244484
  120. 120. Show all quiz questions in one page at a review https://moodle.org/mod/forum/discuss.php?d=238979
  121. 121. Hide the Description Question types in Summary https://moodle.org/mod/forum/discuss.php?d=242893
  122. 122. 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
  123. 123. https://moodle.org/mod/forum/discuss.php?d=238102 Hide the custom menu items during a quiz #page-mod-quiz-attempt .navbar { display:none; }
  124. 124. 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;}
  125. 125. How to change the background color? https://moodle.org/mod/forum/discuss.php?d=237950
  126. 126. 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.
  127. 127. Remove gap between title and options (MCQ) https://moodle.org/mod/forum/discuss.php?d=239613
  128. 128. 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
  129. 129. 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.
  130. 130. 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
  131. 131. http://docs.moodle.org/dev/Using_jQuery_with_Moodle_2.0#jQuery_support_in_Moodle_2.5 APPENDIX: Enabling Jquery in Moodle 2.x
  132. 132. APPENDIX - List of Moodle Question Types installed on CEFL’S Moodle Site.
  133. 133. http://www.youtube.com/watch?v=57i3rhT-tKI
  134. 134. THANK YOU

×