JCross exercise is not displayed properly in Firefox v 2.0

JCross exercise is not displayed properly in Firefox v 2.0

by Kimi Furuta -
Number of replies: 5

Dear all,

I have some JCross exercises that I want to use in my Japanese Moodle course. Today, I uploaded them into my course to test but discovered that the section of crossword grids is displayed almost completely out of the screen to the right in Firefox. When I moved the page to the right using the horizontal scroll bar and clicked one of the question numbers in the grids, however, the grids displayed properly in the centre of the page. Strangely, this does not happen if I use Internet Explore 7, which is the standard browser at my university, to view the course.

Unfortunately, both my students and I have to use Firefox this coming semester to access to the course.  My course is set to UTF-8 to allow me to use both English and Japanese within the course but, I recently found that IE 7 has a Kanji display problem (it displays all Kanji characters in a Chinese font, not Japanese) if a web page is tagged with non-Japanese encodings, including UTF-8.

I have tried to use JCross file instead of html version, but it did not work either (keypads were displayed only partially). 

I am using Moodle 1.8 and Hot Potatoes v 6.2.1.2 (i.e., the latest version). I am not sure which version of Hot Potato Module that we are running, but I could find it out from IT.

I attached an example JCross file that I had a problem. I would greatly appreciate it if anyone could help me to solve this problem.

Best regards,

Kimi Furuta

Average of ratings: -
In reply to Kimi Furuta

Re: JCross exercise is not displayed properly in Firefox v 2.0

by Gordon Bateson -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers
Hi Kimi,
thanks for you report.

Please could you send the JCross file to me at:
gordon at-sign kanazawa hyphen gu at ac dot jp

OR attach it to your next post to this forum.

many thanks
Gordon
Average of ratings: -
In reply to Gordon Bateson

Re: JCross exercise is not displayed properly in Firefox v 2.0

by Kimi Furuta -

Dear Gordon,

Thank you for your quick reply.  Please find the JCross file attached to this posting.

After posting my last message, I realised that I should have tested to open the html version of the exercise file using Firefox outside Moodle.  So, I did.  Then, the section of crossword grids was displayed in the wrong position, which is in exactly the same way as in the one uploaded into Moodle.  This made me wonder the problem is actually in the incompatibility of the version of Hot Potato that I used to create the exercise with Firefox v 2.0, rather than in the Hotpot Module itself.

I would greatly appreciate your comments on this.

Best Regards,

Kimi Furuta

Average of ratings: -
In reply to Kimi Furuta

Re: JCross exercise is not displayed properly in Firefox v 2.0

by Gordon Bateson -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers
Hi Kimi,
you are quite right. This the crossword grid is displayed far out to the right in Firefox, whether the quiz is displayed via Moodle or not.

I think the problem is because of the following CSS style setting for the keypad:
<div class="Keypad" id="CharacterKeypad" style="float: left;">
You can fix it if you open the HTML file and locate the style setting for the Crossword grid:

table.CrosswordGrid{
margin: auto auto 1em auto;
border-collapse: collapse;
padding: 0px;
background-color: #000000;
}

And change it to the following:

table.CrosswordGrid{
margin: auto auto 1em auto;
border-collapse: collapse;
padding: 0px;
background-color: #000000;
clear:left;
}

If you make this change in the Hot Potatoes source folder on your PC, you will not need to change each quiz that you produce.

I will try a few more experiments to try to find out why the CharacterKeypad has the "float: left" setting. There must be a reason why it is there.

regards
Gordon
Average of ratings: -
In reply to Gordon Bateson

Re: JCross exercise is not displayed properly in Firefox v 2.0

by Gordon Bateson -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers
Here are two further workarounds:
  • force the grid to appear below the character keypad
    change this:
    <div class="Keypad" id="CharacterKeypad" style="float: left;">
    to this:
    <div class="Keypad" id="CharacterKeypad">

  • make the character keypad appear as a 3x10 table to the left of the crossword grid
    change this:
    <div class="Keypad" id="CharacterKeypad" style="float: left;">
    to this
    <div class="Keypad" id="CharacterKeypad" style="float: left; width: 130px;">

Average of ratings: -
In reply to Gordon Bateson

Re: JCross exercise is not displayed properly in Firefox v 2.0

by Kimi Furuta -

Hello, Gorden.

Thank you very much for getting back with solutions so quickly!

I tried them all and the first (changing the "table.CrosswordGrid{" and the second one will work for me, though I have not figured out which one works better for students.

As for the third one (adding "width: 130px;"), the vertical position of the grid was much lower than the keypads, rather than the side-by-side with the keypads.

Again, thank you very much for your help on this problem.  I truly appreciated it.

Kimi Furuta

Average of ratings: -