Slides - animated course format

Slides - animated course format

by Jeremy FitzPatrick -
Number of replies: 32
Picture of Plugin developers

I am working on a new course format - an adaption of the topics format. It is designed to give a modern take on the standard course format.

A single topic is shown at a time. Topics are loaded asynchronously to improve  perceived load time. Using the included YUI3 library topics are animated on and off the screen. There are options such as a background image for each topic and custom icons for activities.

Another feature is the topics outline. A list of the topics including completion status is shown in the first frame. The topic names can dragged to position on the page by a teacher. When combined with a background image this can be an effective launch page for the course.

This is a work in progress, but I encourage you to download the source code and trial it out (on a development server!). Please add any questions / comments to this forum.

Source code: https://github.com/noisyjerm/moodle-course_format_slides

The attachment shows two topics mid transition.

Attachment slides_screenshot.gif
Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by Joseph Thibault -
Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Jeremy, this looks very cool.  Is the theme shown in the image part/parcel with the course format?

Also, is this for 1.9 or 2.0 or both?

Average of ratings: -
In reply to Joseph Thibault

Re: Slides - animated course format

by Jeremy FitzPatrick -
Picture of Plugin developers

Hi Joseph

This is built for Moodle 2.0. It relies on the YUI3 javascript library included with Moodle and other Moodle 2.0 code.

I haven't done any rigorous testing or cross-browser testing as yet. I have tested it with Firefox 3 only so far. I imagine the CSS will need to be tweaked.

The theme is separate and is intended to be minimalistic - imitating an application with no fancy headers and the dock at the top of the page. I will look to release that in a few weeks.

Thanks

Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by Joseph Thibault -
Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

gotcha...It's on my list to check out, but only after I install Moodle2.0 (1st things 1st I suppose...still riding the 1.9 wagon).

Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by Hartmut Scherer -

Hi Jeremy,

When I tried to install your theme, I received the following error message:

Plugin "theme_noisyjerm-moodle-course_format_slides-875635c" is defective or outdated, can not continue, sorry.

Debug info: Invalid plugin directory name.
Stack trace:
  • line 280 of /lib/upgradelib.php: plugin_defective_exception thrown
  • line 1426 of /lib/upgradelib.php: call to upgrade_plugins()
  • line 290 of /admin/index.php: call to upgrade_noncore()
I tried to install it in Moodle 2.0.2+ (Build: 20110223) and I am using Firefox 4.
With kind regards,
Hartmut
Average of ratings: -
In reply to Hartmut Scherer

Re: Slides - animated course format

by Jeremy FitzPatrick -
Picture of Plugin developers

Hi Hartmut

This is a course format not a theme.  Create a directory called 'slides' in /course/format. Add the code there so the README file would be /course/format/slides/README

I did an install into a clean Moodle 2.0.2 over the weekend so it should work OK. I have not tested it in Firefox 4 only 3 so i'd be interested to see how it works. Thanks

Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by Hartmut Scherer -

Hi Jeremy,

Thanks for your post and for the correction. Now I understand and will try it out again.

With kind regards,

Hartmut

Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by William Mair -

Jeremy,

Can I ask where in the moodle folders this is placed?

Thanks

Average of ratings: -
In reply to William Mair

Re: Slides - animated course format

by Joseph Thibault -
Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

William, course formats files are generally located in yourmoodle/course/formats.

Doesn't look like there are any other instructions in the Readme.

Average of ratings: -
In reply to William Mair

Re: Slides - animated course format

by Jeremy FitzPatrick -
Picture of Plugin developers

Hi William

The code goes in a folder in /course/format/slides

Browse to the notifications page /admin/index.php and run the update. This will add 2 new tables to your Moodle database.

I'll update the Readme accordingly. Thanks

Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by Daniel Wright -

Greetings Jeremy,

I installed this on my Moodle 2.0.2 instance and it works very nicely with IE8.  I work with corporate clients who often just want to walk students through material in a very linear fashion, and I think they will find this format extremely helpful.  Very nice work.

So far I've found that it doesn't display correctly for me in either IE7 or Chrome 10.  I'm not a developer, so sorry that I can't debug this further.  Again, my corporate clients are pretty much standardized on recent versions of IE, so not a big deal for me at this point.

Thanks very much!
Dan

Average of ratings: -
In reply to Daniel Wright

Re: Slides - animated course format

by Jeremy FitzPatrick -
Picture of Plugin developers

Thanks for your feedback Dan. I've made some improvements and pushed the new code to the github repository. Aside from an annoying flicker which I will look at fixing next, it now works in IE6 and IE7.

I also have created a demo site.

Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by Stuart Lamour -
Picture of Plugin developers

Hi Jeremy,

always good to see new methods of interaction in moodle - at Sussex we use a slide layout for the page which lists a users course sites they are studying/a tutor on, and people loved the interaction.

When users are on a mobile device we include gesture control using a modified version of http://plugins.jquery.com/project/gestures  - so it works like you'd expact a native app to on the device (swipe left - previous list, swipe right - next  etc).

The primary navigation for our sliding page is based on years - current academic year - 09/10 - 08/09 etc... depending on how long they have been studying at Sussex (we keep archive sites for them to look back on).

Putting this together - you get meaningful navigation, and an interesting(dare i say fun!) method of interaction.

I'm interested to know if your users had any issues with the primary method of navigation you provide - i.e. 1 2 3 4 5 6 7 etc. It seems you might have to click through lots of sections to find the one you need? Did this cause any issues and if so have you any thoughts on addressing it?

Cheers

Stuart Lamour

Average of ratings: -
In reply to Stuart Lamour

Re: Slides - animated course format

by Jeremy FitzPatrick -
Picture of Plugin developers

Hi Stuart

Thanks for your feedback. The slides course format is still under development and hasn't been used in the wild yet, so there is no feedback from users. I am taking the release early release often approach to get comments such as yours as I go. Including a swipe gesture could be good for users of devices with smaller screens. Definitely something worth looking into.

One method i have for finding the section more quikly is the 'Outline' which is a list of the sections by title. Of course you have to navigate to the Outline first however. An upwards swipe could be a short cut. wink

One thing I was thinking of implementing was a custom tool tip on the numbers. Currently each has a title attribute which is displayed by the browser as a tool tip if you pause long enough. But i think an instant and more obvious tool tip would be better.

Thanks

Jeremy

Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by Belinda Caulfield -

Hi We have added the slides course format to our test Moodle 2.0 and it is displaying correctly but we cannot select any of the sections or edit them.  Please could you let us know if there is something we might have missed out.  The notifications indicated the two tables were set up correctly.

Thanks

Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by Mat P -

I have installed this plugin into my Moodle 2.0 it seems to be working fine. I have modified the CSS to fit into our sites theme.

My course has 15 topics which display so much more user friendly than the standard list or jump menu.

Im using FF4 and IE9 and seem to work fine so far

Average of ratings: -
In reply to Mat P

Re: Slides - animated course format

by Mat P -

have also tested on iPad2 and seems to work very well. except that the starting Topic does not start on Outline or intro it seems to start half way along, eg: Topic 6

Average of ratings: -
In reply to Mat P

Re: Slides - animated course format

by Jeremy FitzPatrick -
Picture of Plugin developers

Thanks for your feedback Mathew. It's great to hear that it is working on almost every browser / platform.

The system takes note of the last 'slide' you visted so that may account for the starting on Topic 6. Also I have updated the CSS so selectors begin with

#page-course-view-slides

this avoids the styles affecting the other formats. You might want to add that to your CSS.


Jeremy

Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by Mat P -

Not a problem with the feedback, just to let you know it works fine as well in FF5.

Do you have an estimate time frame on the offical release?

Average of ratings: -
In reply to Mat P

Re: Slides - animated course format

by Christoph Ackermann -

Hi,

I just tried this course format with my moodle 2.0.3.

When I change the course format to slides I experience two problems:

1.) I only see the navigation bar with the slide numbers, but the actual slide is not shown. I can click on the numbers and the color changes. Also I can see the name of the slide in the tool tip. But I can't see any actual content

2.) If i clickon "Intro" I get a 404 error.

I tried it with Firefox 4 and Internet Explorer 8 and I also tried different themes.

Does anyone have an idea what might be the issue?

 

Thanks!

Christoph

Average of ratings: -
In reply to Christoph Ackermann

Re: Slides - animated course format

by michael reynolds -

Just tried your slides format in moodle 2. Works great. I have also used the tabs resource inside the slides and they are all working well. I love the drag and drop feature when moving resources inside tabs and between them. The only minor point is a heading to show what each tab topic contains.

Average of ratings: -
In reply to Christoph Ackermann

Re: Slides - animated course format

by Dorel Manolescu -
Picture of Plugin developers

Hi

Same error here. I tried also with differents Moodle installations (Moodle 2.0, 2.1...)

Any idea ?

Thank you!

Average of ratings: -
In reply to Dorel Manolescu

Re: Slides - animated course format

by Jeremy FitzPatrick -
Picture of Plugin developers

Hi Manolescu and Christoph

I will do some investigation to isolate the problem. On the surface of it, I would say it is a javascript error. It seems to me that the JS is not being applied to the navigation links.

The course format is intended to work without javascript, as this is prescribed by the Moodle coding guidelines. So you should not get a 404 error from the intro - there is an error in the link which I need to fix there. If the javascript was doing its thing then the browser shouldn't try to load a new page anyway.

There is a known issue that it does not work with Debugging set to Developer. Settings > Site Administration > Development Debugging. Check that in the first instance.  If the setting is anything else it should be working...

Is there any chance you could tell me what the javascript error is. In IE you will see an error (caution) icon in the left hand side of the status bar (at the bottom of the browser). Clicking on this will bring up a dialogue box possibly telling you where the error is. Better still, if you have the Firebug plugin for Firefox we will get some more useful information. If you can turn on 'use designer themes' in Settings > Site Administration > Appearance > Themes > Theme settings this will show the actual line in the script for debugging.

Thanks

Average of ratings: -
In reply to Christoph Ackermann

Re: Slides - animated course format

by Jason La Greca -
Hey gang, Im having the same issue on 2.1. Ill have a play around tomorrow to see if I can figure it out, but if anyone else finds something first it would be wonderful. Many thanks, Jason.
Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by Martin D - 
Hi Jeremy,

I would like to enquire about the Slide Format plugin that you created. I am wondering how can I add more slides (maximum 20) in the slide format as after installation the plugin showed only 5 slides. Your response and assistance is greatly appreciated.

Thanks, 

Martin
Average of ratings: -
In reply to Martin D

Re: Slides - animated course format

by Jeremy FitzPatrick -
Picture of Plugin developers

Hi Martin

Each slide is in fact a 'topic' so you can set the "Number of weeks/topics" on the course settings page to add more slides.

From your course page click "Edit Settings" under the "Settings" heading. You will need to be logged in as a teacher of the course. Then use the "Number of weeks/topics" drop down to select 20 or how many slides you want. Click "Save changes" to apply the new settings.

Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by Martin D -

Thanks for that, Jeremy.

I was wondering if there is any way to control tracking and completion of the summary page in each slide, that is, when the learner tick each slide as completed or it automatically marks current slide as viewed before proceeding to next?

 

Thanks!

Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by Martin D -

Hi Jeremy,

Is there any way to rename the topic in each topic list button in the Outline tab section?

Thanks.

Average of ratings: -
In reply to Martin D

Re: Slides - animated course format

by Jeremy FitzPatrick -
Picture of Plugin developers

If you give the topic a section name it will be shown in the Outline section slide. When editing is on, navigate to the "slide" you want to rename. Click the "Edit summary" icon in the top left hand of the topic box. You can enter a section name and a summary. This is standard Moodle 2. HTH.

Jeremy

Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by sohail aslam -

Hi Jeremy,

This course format is what I was looking for. I want to use it. I downloaded and followed all the instruction in "README" file. The were no errors on admin->notifications page after installation.

I created the course but when I click on the course link it shows me 5 tabs (basically default number of topic is 5). I also have "intro", "outline" tabs and "Previous" and "Next" buttons.

When I click on "Intro" it gives me "Object not fount! Error 404" error. Actually I have not added any contents/resources/activities in the tabs/topics yet. I have "editing on" but can't see/find "add resources" OR "add activities" links.

I tried with different browsers/themes but no luck.

Can you please help me?

 

Note:

forget to mention I am using Moodle 2.1.1.

I tried using Firefox 6.0.2 , Chrome 14.0 and IE 9.

I figured out the reason/problem of having "Object not found Error" on clicking "Intro". The reason is URL being created is not correct. Means when I click on any of the topic its URL is (for topic 3)

http://localhost/moodle/course/view.php?id=11&topic=3

but when I click on "Intro" the URL is

http://localhost/moodle/course/view.php&topic=0

and if I change above URL to

http://localhost/moodle/course/view.php?id=11&topic=0

then it works fine (means no error but blank page)

 

Hope the above information/investigation will help you.

Average of ratings: -
In reply to sohail aslam

Re: Slides - animated course format

by Ayman Alqudah -

Hi all,

tahnx for you effort and valuabel comnts , i have the same story mentiond above .

Thanx,

Ayman.

Average of ratings: -
In reply to Jeremy FitzPatrick

Re: Slides - animated course format

by Sukhjinder Kainth -

Hi Jeremy,

I installed your slides course format with tango sunrise theme with Debugging set to NONE on my Moodle 2.1.2 + on my windows machine.

I also enabled site wise AJAX.

Still when I view my course in slides display format, all I get is the top navigation bar with Outline, lntro, 1,2,3,4,...... Previous/Next buttons. I don't see any content. Also no side navigation bars, blocks, etc become visible. Everything shows correctly with topics display format.

Please let me know the settings which I'm missing.

Tested on Firefox 10 and Chrome 18, both dev versions.

Thanks!

Average of ratings: -