Combining Moodle quiz code with JQuery, Javascript and CSS to produce some awesome Moodle quizzes.

Combining Moodle quiz code with JQuery, Javascript and CSS to produce some awesome Moodle quizzes.

by Frankie Kam -
Number of replies: 6
Picture of Plugin developers

Hi All

I've been working some time (2 months) on a Placement Test. I am using Moodle 2.5. I have produced quiz questions, that combined with Javascript, JQuey and CSS, are not the run-of-the-mill MCQ questions. These are Cloze type with regular expression capabilities and with some nifty Javascript effects (colors, animation, mouseovers, focus, floating sliders) to enhance the user experience. Here's a sampleof my craft:

 

and below is one more example of my craft (shown in reduced zoom). The horizontal bars are drop down boxes that allow the user choose A, B, C or D. The right column shows a panel containing a vertical set of blue boxes. That panel can automatically slide down as you scroll down the page. Something like in Moodle 1.9 where the quiz timer could slide down as you scrolled down a quiz page.

I wonder how many forum posters here are developers who have experience developing "souped up" and "pimp my ride" customised Moodle quizzes. I would like to 'compare notes' to perhaps exchange ideas, methods and concepts in creating these customised quizzes. 

Regards
Frankie Kam

Average of ratings: Useful (3)
In reply to Frankie Kam

Re: Combining Moodle quiz code with JQuery, Javascript and CSS to produce some awesome Moodle quizzes.

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

You will be expelled from the Moodle conformity chapter if you go a pimping with JQuery Frankie <grins/>

I have been thinking of what fairy dust I can sprinkle on my Gapfill questions and recently thought it would be nice if in the responses I could incorporate the users login name in the feedback, i.e. Well done $firstname that is an awesomely correct answer that gets all the marks going. Not sure how you would go about doing it though.

In the easy to do at the moment corner I have been adding amusing animated gifs to the quiz feedback section, two per quiz. One for 100% and one for 99% and below. Typically these are of the skateboarding dog or amusing kitten type which is silly but once I started doing this the students were most dissapointed if they didn't get one at the end of a quiz.

Anything that makes Moodle quizzes less "bog standard" is nice. I am looking forward to sections in a future version of Moodle

https://moodle.org/mod/forum/discuss.php?d=229143

I have also been playing with the pmatch question type and although it is documentally challenged it is wonderfully powerful. You can allow students to give short free text answers and add feedback for specific ideas. For example I was asked about the UK "copyright designs and patents act", and I produced a question that specifically caught anyone typing patients instead of patents and gave them feedback on the correct spelling and a chance of a second attempt. Which is nice.

Average of ratings: -
In reply to Marcus Green

Re: Combining Moodle quiz code with JQuery, Javascript and CSS to produce some awesome Moodle quizzes.

by Frankie Kam -
Picture of Plugin developers

Hi Marcus

Hmm. Guess I've been living under a coconut shell all this time. According to here, it says "Moodle has officially chosen to use the YUI JavaScript library and it is encouraged to use that wherever possible. That being said, jQuery is very popular, and for what ever reason, it may be required." I didn't realise this until just now. Also here and here for comments/preference on both standards. And then here's the official 'Why was YUI chosen for Moodle?" link. Hope this post doesn't set off any YUI vs JQuery wars! To be totally honest with you, I used JQuery because I found that www.stackoverflow.com had many posts (questions) with replies that involved JQuery. Especially on the GUI part. What a helpful resource that site is, not forgetting the people who provide answers to the posts there!

Thanks for sharing your fairy dust sprinkling.

regards
Frankie Kam

 

Average of ratings: -
In reply to Frankie Kam

Re: Combining Moodle quiz code with JQuery, Javascript and CSS to produce some awesome Moodle quizzes.

by Andrew Lyons -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Frankie,

I wouldn't worry about that war - it's been done a number of times.

As mentioned in the "Why was YUI chosen for Moodle?" link, YUI is a better fit for Moodle. jQuery has it's place, but we felt that it's not entirely compatible with the Moodle use-case.

As mentioned in both of those docs, since 2.5 we now include jQuery with Moodle for add-on use. This actually stemmed from problems of people using it anyway and some plugins overwriting one another's jQuery.

The first article you linked to is pretty old (2010) and the author was originally using YUI 2. Version 3 of the library is much more mature than it was in 2010. The second article you linked to seems a little misleading. In bullet point one, the author states that it's trying to be a complete framework. In reality, YUI is a collection of frameworks brought together with a unified set of patterns. To me this is a feature rather than a flaw as the author seems to hint towards.

Ultimately though, your plugins will work smile

Andrew

Average of ratings: -
In reply to Frankie Kam

Re: Combining Moodle quiz code with JQuery, Javascript and CSS to produce some awesome Moodle quizzes.

by Stuart Lamour -
Picture of Plugin developers

hi frankie, 

for 1.9 we did a tidy up of the html and css.

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.

it came out like this :

Would have liked to improve the usability more, but it was just a quick project.

Average of ratings: -
In reply to Frankie Kam

Re: Combining Moodle quiz code with JQuery, Javascript and CSS to produce some awesome Moodle quizzes.

by Tom Dindorf -

Dear all,

(I have no access to the server i.e. php code or server files, so) I have written all my code in javaScript to manipulate dynamic svgs (graphs, interactive vector manipulation, ray diagrams etc).

So far I've been accessing DOM objects directly with pure javaScript; now I'd like to make use of jQuery.

Can someone give me an example of how to access jQuery functions from within a question text?

If you can show me how to make the following work in e.g. a label, I can figure out the rest:

<p>This is a paragraph will stay.</p>  <p class='h'>This paragraph can hide.</p>  <button>Hide text</button>

<script>

$(function(){

  $('button').click(function(){

    $('p.h').toggle();

  });

});

</script>

We have Moodle 2.9; all pages load with 

<script>//<![CDATA[ var require = { baseUrl : [...] paths: { jquery: [...]}, map: {[...] '*': { jquery: 'jqueryprivate' } jqueryprivate: { jquery: 'jquery' }}};

Thanks


Average of ratings: -
In reply to Tom Dindorf

Re: Combining Moodle quiz code with JQuery, Javascript and CSS to produce some awesome Moodle quizzes.

by Rodney Wolford -

I too am interested in "souping up" Moodle quizzes and questions. My issue is making the Moodle questions more integrated into content discussion pages. It seems in the context of learning, this is essential for using practice to aid in learning and develop a better contextual understanding. Unfortunately, at this point if I want to use a quiz, it seems I must leave my content page, do the quiz, then return to the content page, which I find to be disruptive of the learning context. What I want is the ability to stay on the content page and deliver a quiz. 

Below is an example of how I am doing it now. Consider a situation on a content page where I want individuals to answer a question using a table and content to which they have just been introduced. The calculator and the table appear on the content page and I introduce the questions.  Trainees answer the questions (in white), then click on the buttons to see the answers (in green). How this appears on the page is shown in the attached png file.

Now, using the calculator and the table below, solve the following two problems.

Q1) A vertical curve has a length of 300 feet. G1 is 2% and G2 is -3%. If daytime speed limit is 50 MPH, is this appropriate for a night time flagger without making other adjustments to conditions?

A1) In our first example, L = 400 feet and A = G1 - G2 = 2% - (-3%) = 5%. The resulting calculation shows a headlight sight distance (HSD) less than L so the HSD = 367.16 feet. Using the table, the appropriate night time speed for the given HSD would be about 45 MPH. Some adjustments would be needed.

Q2) Consider a vertical curve with a length of 550 feet. G1 is 2% and G2 is -1.5%. Would a night time speed limit of 60 MPH provide sufficient sight distance for a flagger?

A2) In our second example, L= 550 feet and A = G1 - G2 = 2% - (-1.5%) = 3.5%. The resulting calculation shows a headlight sight distance (HSD) greater than L, so the HSD = 664.29 feet. A speed of 60 MPH would provide adequate HSD for a flagger.

The answers are revealed below each question when a user clicks on the "show/hide" button.

This operation is accomplished with a simple javascript placed in the html source via the edtior.

<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
// ]]></script>

Then, by inserting the answer in a division class that uses script and setting display to "none," it is possible for the answer to appear, e.g., <div class="mid" id="HiddenDiv1" style="display: none;"> Your answer here.</div>

I have extended this method to allow selecting from among a range of answers in a mutliple choice format, for example, with the answer being revealed as wrong or right with an explanation. (Unfortunately, I have not worked out a method for writing trainee responses to the database, so I currently just use this as ungraded practice.)

To me, the ability to incorporate each question type into a frame on a content page would be a powerful improvement. Just my two cents worth. Anyone agree, disagree, have any help?

Regards,

Rod


Attachment QuestionAppearance.png
Average of ratings: -