Hi, i want to show flash like interface for quizes. Since Flash is totally incompatible with iPad/iPhone so it has been ruled out.
Now HTML 5 is the only option left for me, want to know whether moodle is compatible with HTML 5 or not and how can i build a HTML 5 theme..
Plz help..
Thanks in advance..
Moodle is not yet HTML5 compatible but as a good starting point in moodle 2 themes you have layout files inside your theme /layout folder and most of them have
<?php ...
... echo $OUTPUT->doctype() ?>
<html <?php echo $OUTPUT->htmlattributes() ?>>
that should be in HTML5 documents
<!DOCTYPE html>
<html>
To do this you could add a file renderers.php to your moodle 2 theme/yourtheme folder with
<?php
class theme_yourtheme_core_renderer extends core_renderer {
public function doctype() {
global $CFG;
$doctype = '<!DOCTYPE html>' . "\n";
$this->contenttype = 'text/html; charset=utf-8';
return $doctype;
}
public function htmlattributes() {
return ''; // Return nothing (two single quotes here)
}
}
and to your theme config.php
$THEME->rendererfactory = 'theme_overridden_renderer_factory';
to override functions doctype() and htmlattributes() in lib/outputrenderers.php
Some people might want to use XHTML5 with
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
but this gives you immediately a risk of "screens of death" since you’ll have to use valid XHTML syntax for your documents to work and you won’t be able to use for example <noscript> or document.write() ...
So lots of old activities might break if they are not using valid XHTML5.
One workaround is also to keep moodle as it is and use for example external html5 pages with links, popups, iframes etc and wait about 5 years until moodle X.X supports (X)HTML5 ...
One more warning: you may need to disable editor from your user profile to be able to add HTML5 tags like
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
because editor would strip these tags.
+ you may need to think carefully what to do with old IEs
Hey Mauno, Thanks for replying..
yes i can add doctype function in renderer.php file. But i am still wondering that how much change i need to do in moodle core to covert completely to HTML 5.
Like if i want to add an attribute in input type or a tag which is available in HTML 5, then there is no other option but to change moodle core i guess, correct me if i am wrong plz.
old IEs are one concern, i know. Editor will also not work as you said.
i think if i start doing so many changes moodle functionality will break.
So html5 or not still not sure.
When you speak about a "Flash-like interface", what is it you're after, specifically?
If you're just looking to provide a more interactive and responsive user interface, it might be worth thinking about just using YUI to provide javascript enhancements like AJAX and animations. It's worth noting that "HTML 5" used in this context largely refers to new Javascript APIs, not just the HTML tags themselves, and many of these are already available in or emulated by frameworks like YUI.
Hey Mark, actually we have a site (http://www.learnscape.com/) that is running, it is build on .NET and having flash interface for quizes. so we want to convert it in moodle and also want to keep the look and feel pretty much the same as it is right now.
Yes i was also thinking that we can also do it by using YUI, Ajax or even JQuery to get a cool quiz interface rather than going for html5.
After some reserch on moodle, i am now somehow changing my mind that html5 is not a good option as of now.
Hi guys,
These days, standard approach to Flash embedding is to go for Flash as the first option, which covers more than 90% of OS', and have an HTML fall-back, which can be HTML5 in the case of audio, video or animation.
Another option, although you'll have to subject yourselves to iTunes' opaque and somewhat capricious approval process, is to provide an iOS app for your quizzes. Actionscript 3.0 can easily cross-compile into native iOS desktop apps and this feature is well supported, in fact, the best selling iOS app at the moment is developed in Flash and cross-compiled: http://www.leebrimelow.com/?p=3000
The AJAX option looks like a good one too, since at least 30% of users' browsers don't support HTML5. (In other words, by going with HTML5 too soon, you'd be accommodating less than 2% of users at the expense of 30%) Good ol' XHTML4 + JS + CSS will work in almost all cases and if you need multimedia, just use Flash with an HTML5 fallback only for those elements.
I hope this helps!
Or we could as well use in HTML5 moodle flash fallback for IE - like for example http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-html-5-video-with-a-fallback-to-flash/ ( in the future)
It's actually funny that we finally have a version of IE - IE9 - that supports almost all the same things as FF, Chrome, Safari and Opera we suddenly need to worry about supporting some iOS tools...
Apple stole the "role" of Microsoft and is doing business in it's own way
This HTML5 theme issue is related also to http://moodle.org/mod/forum/discuss.php?d=186071
Hi Mauno,
Good idea! I looked at the code on the link you posted and I don't think all those if statements are necessary. As far as I understand it, you just need to use multiple video tags and set the different MIME types:
< video src = " path / to / video / firefox_file . ogg " type = " video / ogg " / >
< video src = " path / to / video / chrome_file . webm " type = " video / webm " / >
< video src = " path / to / video / file . mp4 " type = " video / mp4 " / >
Users' web browsers should be able to distinguish between them automatically.
Hi Matt,
Those aren't "real" if statements - they're just comments to state which browser(s) each one is for. The code at the link uses multiple <source> elements and an <embed> all wrapped within a single <video> tag, which lets browsers know "this is a single video - pick whichever of these formats (vased on the mime type) you know how to play" coupled with only displaying the <embed> (Flash) if the browser doesn't support <video>. You could certainly omit the comments, though you might forget which browser(s) each one is for (though that isn't necessarily a huge deal).
Using multiple <video> tags doesn't give the browser any way to know that it's all the same video - I'd imagine that should a browser happen to support multiple formats (I'm not sure that any presently do, but it's not too much of a stretch to expect them to in the future), it'd display multiple videos; there also wouldn't be a Flash fallback, as an <embed> that's not inside the <video> tag would render everywhere (assuming Flash Player is present).
HTH,
Paul
@Paul, what I meant was that if you set the mime types, which are easy to read, it'll be clear to developers in the future which browsers are supported or not - it'd be a case of a quick lookup in the relevant docs. As you've said, browser developers are currently swearing allegiance to single media containers and CODECs but there's nothing to say that won't change in the future so the if statements would become redundant or even wrong.
Honestly.. as much as I love moodle I don't think it's what you need. I am thinking this would need to be custom and a good point to start at would be jQuizzy. Ofcourse you would need a lot more logic but the interace is flash-esk with jQuery and HTML5/CSS3.
http://codecanyon.net/item/jquizzy-premium-quiz-engine/full_screen_preview/242295
Also, you could look into Wallaby.
Hi Christopher,
Thanks for the reply.
jQuizzy looks awesome. just what i was looking for but i think implementing it in moodle would require lot of customization. but looks great...
Any suggestion on how can i implement it in moodle..
It would, I don't think it is practical to implement this with Moodle. What are are looking for doesn't exists as of yet. I would suggest looking into custom development.
Hi Christopher,
jQuizzy is still under development, i guess..
Actually i have done little modifications in moodle to change quiz interface.
1 - Used jquery thickbox to open questionaire in an iframe popup.
2 - Used "JQuery form plugin" to Ajaxify whole quiz flow.
3 - Some changes in HTML and Jquery effects will provide cool look like jQuizzy.
Looks good now...
Hey Naren,
How far did you get? Can you give me some advice on how to achieve what you did?
-
Matt
Hi Naren, i know that this post is quite old now...
But i was very curious about a "jquizzy like" moodle quiz. Do you have an exemple somewhere where i can watch ur quiz ?
How much would you charge for such a customization ?
Hope u will check this old post...
Regards
Lopez Antoine
