IFRAME Usability

IFRAME Usability

by Jonny McCullagh -
Number of replies: 13
I just upgraded to 1.5+ and added a SCORM package and it didn't look too good. I like the idea of the menu on the left (but I have to go back and remove the menus I manually created for my SCORMs). I have made some small changes to my code which others may wish to discuss. I amended the PlaySCORM.php file, and for the IFRAME I set (hardcoded) the width to 100%. I could not set the height to a percentage as this does not work in IE so I left it as pixels. This makes the page much more usable and means that I do not have to pre-guess my users screen width. I think it may be an idea to allow teachers to enter a percentage for width. I also did not like it that the description/summary forced the menu down a little in relation to the menu structure. I think it would be better in a of its own with colspan=2 so that it stretches across both the menu and the IFRAME. It might also be worth having a few more options to the teacher when adding the SCORM e.g. frameborder=yes/no or even an option of whether to show the SCORM menu on the left - it is a good idea to have it but some of my courses from older moodles have their own menus. These are my suggestions for usability. I think it helps but we still have the 2 scrollbars on the right. Should I be entering these as feature requests? or is talking about it here enough? Thanks, jonny

(Edited by Martin Dougiamas - Tuesday, 21 June 2005, 09:41 PM)

Average of ratings: -
In reply to Jonny McCullagh

Re: IFRAME Usability

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Can you take a screenshot of before and after so we can see what you mean more clearly?
In reply to Martin Dougiamas

Re: IFRAME Usability

by Jonny McCullagh -
surprise I was only opening a discussion - I didn't realise the boss would reply!

Anyway - I have attached the screenshot of before and after. I really hope I'm not the only one thinking about this.
The before image (on the left) has the 800x600 IFRAME in the top right corner and since I have a large screen there is a lot of space around it. This is sorted for my at both my large resolution and an 800x600 resolution by setting the IFRAME with a width of 100%. I hard-coded the height also to 600 pixels but this could still come from the teacher.
I think the easy way around it would be to allow percentages in the width space (but not the height until IE is updated).
Happy to discuss,
jonny
Attachment SCORMfirebeforeafter.jpg
In reply to Jonny McCullagh

Re: IFRAME Usability

by brent simpson -
Johnny:
You must have a pretty big screen there! The default width of the iFrame is 800px so it looks like your screen width is at least 1600. I think that adding the option to have %100 or even a range of percentages might be a good idea, maybe even preferable to having a number you can fill in for the height and width. A lot of average users have no idea what a pixel is.

Also wanted to add a note about your navigation. Including internal navigation in SCORM packages may not be such a good idea if you are concerned about interoperability. Some LMS systems place individual SCOs in a database structure and this will cause your navigation not to work properly; other systems also track SCO progress based on the navigation they provide so providing your own navigation will subvert the LMS from doing this. Of course Moodle works fine, but that's pretty much what we've come to expect approve

brent.,
In reply to brent simpson

Re: IFRAME Usability

by Chardelle Busch -
Picture of Core developers
I agree about the description--since I give rather lengthy instructions in my description, the first thing I did was delete it from the playscorm.php--it just doesn't fit.

As for the navigation, if you create your scorm module as one sco with navigable pages, I think you can still use your original html files. You would then just have the one sco title in the organization rather than a repeat of all of the pages, and you could still use your table of contents and navigation buttons in your html. I'm in the same boat as you, my scorms for 1.4 had a table of contents links and previous/next buttons just like yours and I am taking them out now. I think this way is nice, though, because I don't have to create them anymore, the navigation buttons and exit button are very obvious, and users get the cute little green check after viewing a page(sco). It can make for a very wide reports page, though, if you have 10 or 12 scos. I haven't taken a look at the code yet, is there any way to get rid of the 100ths of seconds in the time reporting?
In reply to Chardelle Busch

Re: IFRAME Usability

by Jonny McCullagh -
I'll try to address each point raised:

- I want to remove my custom menus from my SCO - I only had them there as my previous version of moodle did not have the menu. I am more or less happy with the new menu

- I have a big screen resolution but the point is that if I set a wider resolution in pixels then this will not fit on an 800x600 screen. If I set a smaller resolution to suit 800x600 then all other users will have space around the content - I think 100% width is more usable

- The description might be better as a DHTML tooltip which appears when hovering over a '?' or 'i' icon - this icon could be placed to the right of the 'Course Structure' heading.

- I still like my Previous and Next buttons (is there anyway to keep these so that they still talk to the SCORM module?). I think the Continue and Previous buttons would be better placed bottom right in a row under the IFRAME (and possibly as a row above the IFRAME too like the Reload player) Since as Westerners we read from top left to bottom right and turn pages in books from bottom right.

- I have not even got as far as having little green ticks, I realise the importance of SCORM but have not had the time to make my Dreamweaver pages talk to the SCORM module. If anyone wants to point my in the right direction I'd appreciate it.

I hope this discussion helps in the development of the module.
jonny
In reply to Jonny McCullagh

Re: IFRAME Usability

by brent simpson -
Johnny:
I think i'd prefer that "course structure" be removed as a label, it's kind of obvious what it is, and perhaps put the name of the course there instead. The course label could have a tooltip that displayed the  course description. 

I'd also like the width and height options to be a percentage rather than fill-in boxes;  %100 can be the default.

You can keep your Previous and Next buttons; they will work in Moodle but may not work in other LMS systems that your content may/or may not have to work in. Just something to keep in mind. You can still have your SCORM tracking function quite well with them by calling an LMSFinish function onClick or just having the unonload event achieve the same.

I think i might also prefer the Moodle Previous and Next buttons to go on the right, or above the frame at least.

If you want to see the little green ticks in action you could try making some content in eXe 0.5 instead of Dreamweaver.

I might try and hack the above into our Moodle next week; will post a link to a test page and let you know, unless you beat me to it... wink

brent.

eXelearning: editor : http://exe.cfdl.auckland.ac.nz/


In reply to Jonny McCullagh

Re: IFRAME Usability

by Roberto Pinna -
Picture of Core developers Picture of Plugin developers
Hi to all,

- I have a big screen resolution but the point is that if I set a wider resolution in pixels then this will not fit on an 800x600 screen. If I set a smaller resolution to suit 800x600 then all other users will have space around the content - I think 100% width is more usable

Good idea, I removed 100% width because I can't use it also for height. The basic idea is that normally scoes are best viewed in a particular size, so the teacher can defined it. As Chardelle proposed, I think that I can modify the size definition in order to use both fixed and percentual size for width.

- The description might be better as a DHTML tooltip which appears when hovering over a '?' or 'i' icon - this icon could be placed to the right of the 'Course Structure' heading.

About this I can propose to use block system also in scorm module so the teacher can define his preferred viewing style for each activity. Initially we can have blocks for structure, summary, navigation button and sco stage. In future if we need additional block, we can define it and use it.

- I still like my Previous and Next buttons (is there anyway to keep these so that they still talk to the SCORM module?). I think the Continue and Previous buttons would be better placed bottom right in a row under the IFRAME (and possibly as a row above the IFRAME too like the Reload player) Since as Westerners we read from top left to bottom right and turn pages in books from bottom right.

At this time you can remove the previous and continue button by setting this options in the manifest when you define an item:
<item identifier="ITEM47" identifierref="QUESTION8">
    <title>QUESTION 8</title>
    <adlcp:presentation>
        <adlcp:navigationInterface>
            <adlcp:hideRTSUI>previous</adlcp:hideRTSUI>
            <adlcp:hideRTSUI>continue</adlcp:hideRTSUI>
        </adlcp:navigationInterface>
    </adlcp:presentation>
</item>

These are the other features that I will try to include in Moodle 1.6:
a new course format called SCORM;
complete AICC conformance;
complete prerequisite support for SCORM 1.2;
popup window for sco stage.
And anything I will develop before Moodle 1.6 release.

Cheers,
Bobo.
In reply to Roberto Pinna

Re: IFRAME Usability

by Chardelle Busch -
Picture of Core developers
Another iframe question for you Bobo.

Due to a new theme I am using, I need to set the background of the iframe to transparent, (because of Internet Explorer) but I'm not sure how.  Here's the info I got about IE, but I don't know where (or if there is one) the iframe source is:
Thank you!

The following conditions must be met to define transparent content for inline floating frames.

Note  The BGCOLOR attribute can be applied to the BODY element, but it is deprecated as of HTML 4.0. It is recommended that you use the background-color attribute instead.

The following example shows how to apply the background-color attribute to the IFRAME content source file.

<HTML>
<BODY STYLE="background-color:transparent">
<P>Transparent.
</BODY>
</HTML>

The following example shows how the IFRAME element is written for transparent content.

<IFRAME NAME="Frame1" SRC="frame.htm" ALLOWTRANSPARENCY="true">
</IFRAME>

In reply to Chardelle Busch

Re: IFRAME Usability

by Jonny McCullagh -
Thanks for the reply Bobo - I think those changes would make a big difference for usability.

I have a lot to learn in making my pages SCORM-compliant and have started reading 'Cooking up a SCORM' - no doubt I will be back soon with questions.

In relation to Chardelle's comment, would it be possible to add a style class to the IFRAME so the IFRAME class="SCORMiframe"
and the theme could then style this as allowtransparency, frameborder=0 or whatever?

To Brent: I have downloaded eXe and want to encourage those around me to use it but I have to get to grips with it myself first. I am familiar with DW so bashing out pages is easy - but I will try to use eXe in my next course. It would be good if eXe could be used by teachers to edit/amend existing SCORM courses while still in Moodle (Am I talking out my r end?). I can create lessons which teachers can amend online but I'm not aware of how this could be done for a SCO in moodle (without repackaging and uploading again).
In reply to Jonny McCullagh

add anothers navigational models

by Ronnie Brito -
great
as we are talking about moodle´s scorm player usability, and the commutnity seems to be open for suggestions, i got one :D

A SCO may have several levels of hierarchy depending on the content and size of SCO... and if we are in the deepest level of the content, the navigation three may be and unpleasant "sequoia" on the right side of the screen

So I suggest  the creation of an aditional navigation model, as showed on the attached image, and that could be choosen when creating the SCORM.

Its working is very simple: Instead of the whole three being showed on the right, just the imediate levels below are showed (red box). As the user goes inside hierarchic levels, the accessed nodes are appended in a new bread crumb (blue box)

The only issue is how to treat the already existing moodle bread crumb (yellow box), that could be i litle bit confusing


Attachment change.png
In reply to Jonny McCullagh

Re: IFRAME Usability

by Jonny McCullagh -
I have been playing with the IFRAME a little more and have found that at a low resolution e.g. 800x600 the user has 2 scrollbars on the right, one for the IFRAME and one for the browser window.
I didn't like this so what I have done to rectify this is to always specify a very large number for the height when configuring the SCO e.g. height=1200.
This means there is always more than enough height in the IFRAME to cope with the contents so it doesn't need a scrollbar. So the only scrollbar we are left with is the browser scrollbar.

So for me width=100% height=1200 works best for usability. I have also added the frameborder="0" to playscorm.php as I think this lets the IFRAME fit into the page better - almost seamless now smile
Attachment SCORMfirescrollbars.jpg
In reply to Jonny McCullagh

Re: IFRAME Usability

by Tudor Danes -
Hi,

I would like to propose a new option for a SCORM package :
Hide navigation box (in player window).

I tried to remove it myself (commented scorm_display_structure call in playscorm.php ), but it seems it's necessary to call this function in order to get the scoid.

What do you think about it ?

In reply to Tudor Danes

Re: IFRAME Usability

by Roberto Pinna -
Picture of Core developers Picture of Plugin developers
Hi,
please wait!!!!
Moodle 1.6 will be much flexible with the interface customization.
You can use popup-window, hide TOC, hide navigation buttons and I think I could add also some kind of Moodle navigation bar hiding.

So please, wait.
I hope I can release a beta version of module for Xmast.

Bobo.