css3 Facelift for HotPotatoes

css3 Facelift for HotPotatoes

by Stan Bogdanov -
Number of replies: 27

Hi All,

I've heard people comment on the looks of HotPotatoes exercises: that they look very old-fashioned and very much 'old web'. Indeed, their layout was designed quite some years ago. However, with some CSS3 you can give them great modern 'mobile-like' looks.

See the css3 Facelift - http://ewbooks.info/hotpot/assets/taxonomy/html5video/css3_Facelift.htm

The css3 Facelift features:
- rounded corners of layout boxes, navigation buttons and function buttons
- rounded input fields and borders of textarea
- rounded corners of cards in JMatch drag and drop
- rounded borders of dropdown select menus for JCloze dropdown output
- dropshadow on buttons and draggable cards in JMatch
- Added a shade of the color for Navbar border color

I tweaked the original css and offer you the custom file for download from my site at http://www.ewbooks.info/hotpot/templates . The zip has a pdf with a Howto on usage.

Please, write back if you like the way it looks, and MORE importantly, if it works OK for you. It's hard to please all browsers and OS.

Very much looking forward to any comments.

Cheers

Stan

Average of ratings: Useful (2)
In reply to Stan Bogdanov

Re: css3 Facelift for HotPotatoes

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Good job, Stan. Nice new look!

One minor problem, on the Music quiz (HTML5 video demo) page, if I click the Next button at the bottom it says: "The requested page "/hotpot/assets/taxonomy/html5video/nextpage.htm" could not be found."

ATB

Joseph

Average of ratings: -
In reply to Joseph Rézeau

Re: css3 Facelift for HotPotatoes

by Stan Bogdanov -

Hi Joseph,

Thanks a lot for the feedback.

The navigation buttons weren't meant to take you anywhere. They're sitting on the page only as a layout feature. Thanks anyway.

Cheers

Stan

Average of ratings: -
In reply to Stan Bogdanov

Re: css3 Facelift for HotPotatoes

by Martin Fischer -

Indeed, HOTPOT exercises look quite attractive  “your” way, Steven . And I would have liked to use it.  But ….  

  • When I upload a*.jqz, *.jcl etc. to my moodlesite  via Gordon´s Hotpot-module, Steven´s style won´t be preserved, right?   I tried and it was not preserved.
  • When I upload the same quiz as htm (hotpotquiz with Youtube video emdedded in a fixed Leftcontainer),  the result isn´t satisfactory, either, because the video jumps  from the left container to the very right of the rightcontainer area, at least with  CHROME and IE. With Firefox it remained where it is supposed to.

 Attached file: :  Quiz with embedded youtube-video in “Steven´s modern style” uploaded as htm and visualized with chrome. The video has moved to the right, almost completely outside the frame.

Is there anything I can do about it?

Thanks a lot, 

Martin Fischer

Attachment jumping video.jpg
Average of ratings: -
In reply to Martin Fischer

Re: css3 Facelift for HotPotatoes

by Stan Bogdanov -

Hi Martin,

the name is Stan! Anyway, you talk about two different things.

Re: The css3_Facelift

The HotPot module uses the original css (slightly modified by Gordon), so when one uploads the .jcl or .jqz, the module uses that css to display the exercise.

If, however, the uploaded file is the .htm output, the new css3 will be in effect.

The fixed left container is a different thing and has nothing to do with the css3_Facelift. The same thing, I bet, will happen with the original css under the same conditions and settings.

Cheers

Stan

Average of ratings: -
In reply to Stan Bogdanov

Re: css3 Facelift for HotPotatoes

by Stan Bogdanov -

BTW,

css3_Facelift v1.3 had a bug. Maybe you're using this version?

Fixed in v.1.4.

Cheers

Stan

Average of ratings: -
In reply to Stan Bogdanov

Re: css3 Facelift for HotPotatoes

by Martin Fischer -

Hi Stan,

thanks for your quick answer and sorry about the mistake with the name. From yur reply I understand, that

  • the sourcefiles are somewhere in the hotpot module of the moodle-site and theoretically could be customized, though probably this "new" sourcefile would not automatically appear as an additional output choice in the hotpot configuration page. 
  • About my problem with the position of the video within the page I knew quite well it didn´t have anything to do with your css3-facelift, I just hoped that maybe someone could give me a hint about how to solve this problem.

Thanks again,

Martin Fischer

Average of ratings: -
In reply to Martin Fischer

Re: css3 Facelift for HotPotatoes

by Stan Bogdanov -

Hi Martin,

Re: the sourcefiles are somewhere in the hotpot module of the moodle-site

Correct. They are in the source of the hotpot module and can be modified.

Re: "new" sourcefile would not automatically appear as an additional output option

No, it won't, unless Gordon decides to include it in the options

Re: fixed left container

I guess you use this code in the div.LeftContainer{ 

position:fixed;

This is a bit problematic - the position: fixed takes out the element and throws it out of the current div and into the parent element/div, causing the layout problem.

I think I have an idea which I'll try later today and I will get back to you. In the meantime, could you tell me if the video behaves normally when the exercise is outside moodle as a standalone html file? And could you send the file in question attached?

Cheers

Stan



Average of ratings: Useful (1)
In reply to Stan Bogdanov

Re: css3 Facelift for HotPotatoes

by Martin Fischer -

Hi Stan,

yes,  the video behaves correctly as standalone htm,  here comes the file. 

In case you need access to my moodlesite, just let me know it. 

Martin 

 

 

Average of ratings: -
In reply to Martin Fischer

Re: css3 Facelift for HotPotatoes

by Stan Bogdanov -

Hi Martin,

If the file behaves normally outside moodle, it must be something in the Moodle theme, or the HotPot module... hard to guess without seeing the patient wink

Could I get teacher access to this exercise? Post the credentials privately via moodle messaging or to stanbogdanov - at - yahoo - dot - com

Cheers

Stan

Average of ratings: -
In reply to Martin Fischer

Re: css3 Facelift for HotPotatoes

by Stan Bogdanov -

Hi Martin,

I see you have css3_Facelift v1.3 with the bug.

Get the new css3_Facelift v.1.4 and say if that fixes it.

Stan

Average of ratings: -
In reply to Stan Bogdanov

Re: css3 Facelift for HotPotatoes

by Stan Bogdanov -

Hi Martin,

I logged in your moodle, looked at the exercises and tried every other way.

  • The iframe is no problem
  • I tested using the <object> tag - no problem;
  • I tried with the old css and my new css3 - the video shows up fine with both the original css and the css3 if position: fixed is NOT present.
  • If position fixed is introduced, in both the original and css3 the video is floated to the right.

I uploaded the same file to my moodle 2.2. It uses a similar theme with another course format and there's no problem with the float - neither with the css2, nor the css3 ...

Here are two links to check out:

HotPot Martin iframe fixed position video - css3

HotPot Martin iframe fixed position video - css2

Login with:

usr: student
psw: Tester-1

I conclude it must be the course format or the moodle theme, but I couldn't find what causes the bug.

Anyone else help ...

Cheers

Stan

Average of ratings: -
In reply to Stan Bogdanov

Re: css3 Facelift for HotPotatoes

by Martin Fischer -

Hi Stan, 

I really appreciate your help, and though the problem is not solved yet, at least we know there must be some kind of solution. I tried some other themes and tested the file on my local moodle site, ... so far no success.

Martin 

Average of ratings: -
In reply to Martin Fischer

Re: css3 Facelift for HotPotatoes

by Stan Bogdanov -

Hi Martin,

Have you tried other course formats?

Stan

Average of ratings: -
In reply to Stan Bogdanov

Re: css3 Facelift for HotPotatoes

by Stan Bogdanov -

Gordon,

Could it be an issue with HotPot for 2.3? I carried out some more tests (on your moodle 2.3 http://bateson.kanazawa-gu.ac.jp/23/course/view.php?id=2#section-2) and here are the results:

Martin's file position:fixed; Stan's file position:fixed; HotPot Display Navigation Settings
X ReadingDiv disappears X ReadingDiv disappears Standard Moodle navbar (top & side)
X ReadingDiv disappears X ReadingDiv disappears Top Moodle navbar only (no sidebars)
OK OK Moodle Navigation frame
OK OK Embedded webpage
OK OK Original navigation
OK OK None

 On my Moodle 2.2.1 (Build: 20120109), HotPot v2010080346 there's no such thing

Cheers

Stan

Average of ratings: -
In reply to Stan Bogdanov

Re: css3 Facelift for HotPotatoes

by Martin Fischer -

Hi Stan,

I finally found out what the problem is  : position:fixed won´t work, if the hotpot-quiz-htm  is displayed with "Standard moodle navigation bars" or with "Top Moodle navigation bar only". Perhaps the same will happen with reading texts (and other types of information)  instead of embedded videos, although I haven´t tried yet.smile

greetings,

Martin Fischer

 

Average of ratings: -
In reply to Martin Fischer

Re: css3 Facelift for HotPotatoes

by Gordon Bateson -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers

Hi guys,
love the new styles !

Sorry if you explained it already, but why do we need "position:fixed" ?

Gordon

Average of ratings: -
In reply to Gordon Bateson

Re: css3 Facelift for HotPotatoes

by Martin Fischer -

Hi Gordon

Well, I love fixed position because it allows students to scroll the questions and - at the same time - watch the video! Stan, I just saw you sent your last post just a few minutes before I came to the same conclusion.

yours

Martin

Average of ratings: -
In reply to Gordon Bateson

Re: css3 Facelift for HotPotatoes

by Stan Bogdanov -

Hi Gordon,

The position:fixed; freezes the ReadingDiv and if there's text or video, the quetsions (when Show all questions is pressed) scrolls down without actually scrolling the text or video along. In this way the text/video remains visible on the page (fixed) and it's not necessary for students to scroll up and down (for instance, the last few questions may refer to the first paragraph in the text; or if students have to watch the video at all times and be focused while they answer the questions). It's just a small enhancement.

Cheers

Stan

Average of ratings: -
In reply to Stan Bogdanov

Re: css3 Facelift for HotPotatoes

by Gordon Bateson -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers

Oh I see. That makes sense.

Unfortunately the Moodle 2.x styles are rather complicated. I can't see a solution at the moment, but let's keep working on it.

Gordon

Average of ratings: -
In reply to Martin Fischer

Re: css3 Facelift for HotPotatoes

by Stan Bogdanov -

Hi,

Furter on

Martin, your assumption is correct. The same thing happens with a reading text as well as video, image or whatever you put in the ReadingDiv. The ReadingDiv gets thrown to the far right (altough it has position:fixed; and float:left;) and on Gordon's moodle 2.3 it's completely invisible or maybe somewhere hidden to the side of the viewport.

Correction: with the setting "Embedded web page" - the position:fixed; takes no efect: the reading text/video scrolls along just the way it does in the standard behaviour.

Cheers

Stan

Average of ratings: -
In reply to Stan Bogdanov

Re: css3 Facelift for HotPotatoes

by Gordon Bateson -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers

Adding the following styles seems to help - at least when the quiz is in Moodle:

div.LeftContainer {
 width: 49%; /* was 49.8% */
 left: 14px; /* new value */
}

Is that any better?
Gordon

Average of ratings: -
In reply to Martin Fischer

Re: css3 Facelift for HotPotatoes

by Stan Bogdanov -

Hi Martin,

on your moodle none of the settings works with possition:fixed;  (text/image/video)

Stan

Average of ratings: -
In reply to Stan Bogdanov

Re: css3 Facelift for HotPotatoes

by Gordon Bateson -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers

Well pardon me, but it does work, and here's the proof (see screenshot)

So setting the "left" value will force the LeftContainer back into view. This works OK when the HotPot navigation is "Top Moodle navigation bar only (no side bar)". Unfortunately, when the side bars (Settings and Navigation blocks) are displayed, we need to change the left value depending on whether blocks are docked, or not. I think we could only do that with JavaScript.

So I think our best effort is to add the "left" and "width" settings, and to set HotPot navigation to "Top Moodle navigation bar only (no side bar)".

best regards
Gordon

Attachment Screen Shot 2012-12-12 at 12.22.05 AM.png
Average of ratings: -
In reply to Gordon Bateson

Re: css3 Facelift for HotPotatoes

by Stan Bogdanov -

Hi Gordon,

This will partly solve it only when there's no navigation or no sidebars.

See the screenshot from Martin's Moddle and yours.

Stan

 

Attachment position-fixed.png
Average of ratings: -
In reply to Stan Bogdanov

Re: css3 Facelift for HotPotatoes

by Gordon Bateson -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers

Stan,
I know the suggested solution only solves the problem partly. That is what I wrote in my previous message

I said the side bars don't work well, but the top bar alone works fine. That's the best we can do for now, in my view.

We can only go further if we add JavaScript to the page, to reposition the LeftContainer dynamically.

The reason that this issue occurs is that by using "position: fixed" on an DIV, you take that DIV out of the normal flow of the page. It becomes disassociated from its sibling elements (e.g. the RightContainer) and parent element (the DIV that holds the HotPot content), and it floats around with all the other floating elements - and Moodle has several of those.

Outside of Moodle, there are no invisible floating elements to push the "position fixed" DIV around, but within Moodle the situation is much more complex, and the hapless, parentless "position: fixed" element gets pushed off to the right - either under the RightContainer DIV or completely off the right of the page.

Gordon

Average of ratings: Useful (1)
In reply to Gordon Bateson

Re: css3 Facelift for HotPotatoes

by Stan Bogdanov -

Hi Gordon, Martin,

This is very useful. It's just that on my moodle 2.2 there's no problem (others may be willing to confirm) while on moodle 2.3 it happens. Apparently it's some moodle styling or something from the theme.

Anyway, the code for displaying (near) perfectly for you, Martin, on your moodle will be the following:

div.LeftContainer{
...

float: left;
width: 46.8%;
position:fixed;
left: 40px;
}

.ReadingText{
text-align: center;
}

Display settings of HotPot are as Gordon said: Moodle navigation bar only (no side bars)

This retains most of the consistency in design and layout. For other moodle setting the width and the left position will have to be manually set and tested. For instance, on Gordon's moodle (with the default theme) these display the best:

div.LeftContainer{
...

float: left;
width: 48.8%;
position:fixed;
left: 1.1%;
}

Cheers

Stan

Average of ratings: -
In reply to Stan Bogdanov

Re: css3 Facelift for HotPotatoes

by Martin Fischer -

Hi Gordon, hi Stan

thanks a lot to both of you. Until Friday I won´t have time, but during the  weekend I´ll have quite a bit of work to do on all tipes of moodle hotpot quizes. I´ll let you know, how it has worked out.

Martin Fischer 

Average of ratings: -