Hello
I have an Arabic Moodle site. The only problem is when displaying quiz questions, as the question and its answers are displayed to the left, by default.
I need to move them to the right...
Tried Firebug, but it does not point out the exact css file to be edited.
I attached three images, the first is for the current layout, the second is for the required one, and the third is for the Firebug screenshot where it shows where to edit.
Please advise,
Shadi
Hi Shadi,
I'm afraid those screenshots are too tiny for me, but I have understood that you want to have your questions lined up on the right instead of the left.
Did you try enabling RTL (right-to-left) languages in the JQuiz settings?
regards
Gordon
Thanks, Gordon
I am sorry, but I could not find JQuiz, so I could not see its configuration.
I attached the images as a zip file.
My question now is: Does the JQuiz config affect all the questions' layout regardless of the source activity module (Hot potatos or anything else) ?
Thanks again,
Shadi
> I am sorry, but I could not find JQuiz ...
Really? How did you make the quiz?
> Does the JQuiz config affect all the questions' layout
> regardless of the source activity module
> (Hot potatos or anything else) ?
No - but I do not fully understand your question.
Gordon
The quiz is made using Hot Potatoes...
> The quiz is made using Hot Potatoes...
... yes, and Hot Potatoes is made up of 5 programs: JCloze, JCross, JMatch, JMix and JQuiz. Which one did you use to make your quiz?
Oh, sorry !
I was looking in Moodle for JQuiz
I enabled it . . . Will let you know with the results...
Thanks
Hello
Still...
That just moved the (A, B, C, D) to the right, but kept the question and answers to the left.
I remember in Moodle 1.9 I did that through css. No, I cannot find where to do it...
Regards,
Shadi
Please attach a sample Arabic JQuiz file to your next post to this forum, so that we have something to work with.
Shadi
<style type="text/css">
ol.QuizQuestions li.QuizQuestion{
text-align: right;
}
ol.MSelAnswers li,
ol.MCAnswers li {
direction: rtl;
text-align: right;
}
ol.MSelAnswers li p.RTLText,
ol.MCAnswers li p.RTLText {
/* cross-browser inline-block */
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
</style>
If that works OK, try the following:
Even if this doesn't do exactly what you want, I hope it will show you how to go about changing the display to get what you want.
regards
Gordon
Gordon, you are beautiful
It worked great. The output is as it should be.
The question itself is still desplaying to the left, but I think that is done via css.
Thank a lot for the guidance through.
Best wishes,
Shadi
Hi,
I have a simialir need, I have a Hebrew website and used the Drag and Drop Hot Pot module quite extensively.
I need the fixed collumn to be on the far right of the page (and which contains Hebrew) while the draggable collumn should be the one on the left. In Moodle 1.9 I somehow figured it out as you can see in the picture below, however in this new version of HotPot I am stuck. Any suggestions? All I need is one working html page and I can take the rest from there.
Thanks!
Tzvi
Hi Tzvi,
to your next post to this forum, please attach a zip file containing the jmt and html files of a JMatch exercise that behaves the way you want in Moodle 1.9, and from there we can try and get it to do the same thing in Moodle 2.x
Gordon
Thank you so much Gordon!
Just to be clear I didn't use the jmt file to create the reversed matches. I only modified the outputted .html file. In other words, once Hotpot created my original html file I modified it (I seem to remember changing values on x and y from postive to negative or something like that) until I got the output I desired. From that point, I would modify the .html file I had created for each new excercise by changing the values in the arrays and other sections of the .html file. Thus, I am only attaching an html file.
Please let me know what else I can do.
Thanks again for taking a look at this!
Tzvi
Hi Tzvi,
thanks for the html file, but I really wanted the jmt file too.
Basically I am trying to find out *exactly* how you have customized the html file, and the most efficient way for me to do that is by generating a standard html file from the jmt file and then comparing the standard html file with your cutomized html file.
Since you have only given me the html file and a vague hint about "I seem to remember changing values on x and y", then you are asking me to examine 1500 lines of code in the html file and expecting me to be able to see "oh yes, he's changed this, that and the other". You're asking a lot there my friend.
Maybe I can copy and paste the items from your customized html file to a new jmt file, but that is extra work for me and means I cannot help you as efficiently as possible.
Gordon
I have compared your custom html with a standard JMatch html file and discovered that you made the following changes:
Actually if would have been better if you had done the search-and-replace in a case sensitive manner, i.e.
Because you did case insensitive search-and-replace, your custom html file contains an occurence of "offsetright" which is not valid. That should be "offsetRight".
Note, that if you had make those changes to the following files in the Hot Potatoes source file templates - located in the "source" folder within whatever folder Hot Potatoes is installed at on your PC, you could use the normal JMatch program to edit your quizzes, and generate html files from within JMatch
However ...
... this doesn't seem to help when we try to run the quiz through HotPot for Moodle 2.x. As you may know, the CSS on Moodle 2.x is considerably more complicated than on Moodle 1.x, so we might have to be a little more sophisticated in the way we modify the JMatch file.
I am rather busy at the moment, and I won't be able to give this issue my full attention until I have completed several high priority tasks that must be done ASAP. I expect I can look at it later this week.
regards
Gordon
Gordon,
First of all, thanks tons! Sorry about the jmt file, but I thought it was a pretty standard thing as I just used it to create a standard drag and drop web page and after that I only modified the output that was on the html page.
Okay, fist the good. I did the changes you suggested and the output in the browser outside of Moodle was perfect! The fixed collumn was on the right and it worked great! I go excited...but...
Now, the not so good. When I then uploaded the same file to Moodle the collumns were still reversed as if we had not done anything and as you can see in the pic one of the collumns is "sliding" off the page. I'm not sure if this a theme issue or something else. At first I couldn't see the collumn on the left at all and then I switched themes and was able to make out the collumn you see in the picture. Any thoughts?
Looking forward to hear from you after you get your other things out of the way as this is not an immeadiete rush.
Thanks again for all your efforts!
Tzvi
PS Still trying to figure out how I can subscribe to this forum in order to reply in a more timely manner.
Tzvi,
I wanted the jmt file because it has the Hebrew characters in it. I wanted real live items to investigate with. Real data is richer and more complex than stuff I can come up with.
Anyway, may be that doesn't matter ... I made a Hebrew jmt file by copying and pasting from your HMTL file. Then I created a standard JMatch HTML. Then I made a few changes to get it sort of working in Moodle 2.x.
Here are the three changes I made (to a standard JMatch HTML file):
The attached file contains the above modifications and should perform reasonably well in any Moodle.
You may find that the attached file is not perfect. For example cards that are wrongly placed go to a slightly odd position when you click the "Check" button. Also, your probably want to align the Hebrew text in right in the box that contains them. However, it is a good start.
If you wish *all* you JMatch exercises to behave in this way, I suggest you modify the Hot Potatoes source files on your PC, as I mentioned in my earlier post.
regards
Gordon
Gordon,
You are too quick for me! Okay, I uploaded the file you attached and it displays properly within Moodle. There are some slight asthetic changes I would still like made like having the fixed collumn on the far right of the page and to have the boxes on both sides being the same size. I assume the latter is in the CSS somewhere.
You are right, it would be easier to work of the jmt generator, so if you can figure this stuff out later in the week when you have a chance that would be great otherwise I will have to give it a shot on my own although I don't really trust myself all that much.
Thanks again!
Tzvi
PS Finally found the subscribe link to this forum...not used to Moodle 2.0+..as I am afraid to upgrade from 1.9 before I know key components will work as needed.
Tzvi,
I found a fix for the incorrectly placed draggable items moving oddly after the Check button is clicked.
I'll have a look at the positioning of Left/Right columns later this week
Gordon
P.S. Updated html file attached.
Tzvi,
here is an improvement for the position of the fixed and dragable items:
If you want the fixed and dragable cards to be the same width you can uncomment (= remove the "//" from) the first five lines above.
Please try out the latest version of the html file (see attached file) and let me know what you think.
cheers
Gordon
P.S. You can remove the lines I suggested in an earlier post involving "TempColPos".
Gordon,
As the old saying goes, "if you want something done, give it to a busy man".
You are right it is an improvement, however we not all there yet in term of aesthetics. For starters I don't see the boxes being the same size after uncommenting the lines you mentioned. Also, personally I would prefer the boxes on the right line up with the right edge of the big box on top if possible.
Again, this is only aesthctics at this point.
Tzvi
Well, to push the cards all the way to the right you can modify the settings for LeftColPos and RghtColPos:
The cards look a similar width to me. Do you mean you want them the same height as well?
Gordon
The similar height in your original sreen shot is created by using CSS to fix the size of the English and Hebrew fonts.
Then you should be good to go!
Below is a link to the official page on modifying the Hot Potatoes source files. You can use these techniques to define your own versions of the CSS and JS files for JMatch, and then use those when you create JMatch exercises in the future. No more modifying the HMTL files everytime you create a new matching exercise
cheers
Gordon
P.S. attached HTML file inculdes this and all previous modifications
Thank you so much again Gordon,
I was getting frustrated because after I downloaded your most recent file, I opened directly in a web browser and couldn't see any changes. I modified things and still no luck...then I decided to actually put it in Moodle and of course your modifications worked.
Before discussing modifying the source files, I wasn't clear on how the to push the column on the right all the way to the right. You suggested modifying this line:
LeftColPos = (pg.Left || 0) + pg.W - Widest;
RightColPos = Math.max((pg.Left || 0), LeftColPos - (WidestRight * 2) - 14);
However, I have no clue what these numbers mean... can I still nag you?
Tzvi
Tzvi,
> I have no clue what these numbers mean... can I still nag you?
I think you are asking me to explain what the numbers mean. Well OK, I will try, but to really understand it, you would have to look through the JavaScript and follow the flow of the program.
Anyway, here's what I understand those numbers to mean ...
So in plain(ish) English, those two formulae mean ...
Sorry if that doesn't mean much to you, but those are the terms in which I think
cheers
Gordon
I appreciat that...as I am ready to retire for the night.. what does this mean?
WidestRight * 2) - 14)
Are those pixel numbers?
Tzvi
> WidestRight * 2) - 14)
> Are those pixel numbers?
2 is a just multiplier; 14 is pixel number and has the effect of creating 14 pixels of space between the dragged and fixed cards
Hi Gordon,
I just spent an hour and a half trying to modify the source files without any luck. I am afraid it is a little over my head. If you can give the modified source files that reflect the changes you made, I would appreicate it.
This is not a rush if you are busy.
Thanks.
Tzvi
Perhaps you are confused about where the lines that need changing are in the "source" folder? I suggest you use a file search utility such as "Windows GREP" or "dnGrep". That's what I did. I found you need to alter 3 files:
For your reference, here are the required modifications:
1. in the CardOverlap() function (see hp6card.js_) ...
replace these lines (around line 71):
var smR=(this.GetR()<(OtherCard.GetR()+this.OverlapTolerance))? this.GetR(): (OtherCard.GetR()+this.OverlapTolerance);
var lgL=(this.GetL()>OtherCard.GetL())? this.GetL(): OtherCard.GetL();
with the following lines:
var smR=Math.min(this.GetR(), OtherCard.GetR());
var lgL=Math.max(this.GetL(), OtherCard.GetL() - this.OverlapTolerance);
2. In the CardDockToR() function (see hp6card.js_) ...
replace this line (around line 84):
this.SetL(OtherCard.GetR() + 5);
with this line:
this.SetL(OtherCard.GetL() - 5 - this.GetW());
3. in the StartUp() function (see djmatch6.js_) ...
locate this line (around line 158):
var WidthToSet = WidestRight-12;
insert the following lines AFTER the above line:
//if (Widest > WidestRight) {
// WidestRight = Widest;
//} else {
// Widest = WidestRight;
//}
LeftColPos = (pg.Left || 0) + Math.floor(pg.W * 14/15) - Widest;
RightColPos = Math.max((pg.Left || 0) + Math.floor(pg.W * 1/15), LeftColPos - (WidestRight * 2) - 14);
4. in CheckAnswers() function (see djmatch6.js_) ...
replace this line (around line 310)
DC[i].SetL(DC[i].GetL() + 10);
with this line
DC[i].SetL(DC[i].GetL() - 10);
5. in the <style> section at the top of the HTML file (see hp6.cs_)
locate the ".RTLText" CSS selector (around line 72)
change "font-size: 150%;" to "font-size: 100%;"
locate the ".CentredRTLText" CSS selector (around line 79)
change "font-size: 150%;" to "font-size: 100%;"
Try that and let me know how you get on
regards
Gordon
Gordon,
First, you are AWESOME! Yes, I did for example miss the hp6card.cs file and in the others I still wasn't one hundred percent sure what needed changing. Your last post brought it all together very clearly. I modified the source file and created the attached Hotpot using the interface which is MUCH easier as you mentioned.
If there is one last request I can make, how can I get the jumbled column (which is now on the far left) set back a little more? When one starts doing the matches the docked items are a little too close to the jumbled column which might get a little confusing as you can see in the pic. I assume it is modifying one line of code somewhere?
In any event, I just wanted to thank you again, because now I have something I can really work with! I had been holding off upgrading my Moodle 1.9 site this year until I get things like this sorted out and you have been a great help!
Tzvi
Tzvi,
you did it - well done!. That was my goal - to empower you to be able to make these changes yourself.
I notice from your screenshot that you have not yet uncommented the lines to make the Hebrew cards the same width as the English cards, but you know how to do that now, right?
To shunt the starting position of the English cards further to the left, you can increase the value of the "14" number we talked about earlier.
As it stands, this formula calculates the position of the LHS of the Hebrew cards, minus twice the width of the English cards minus 14 pixels. As you increase the "14", so the English cards will move further and further left.
I look forward to seeing the results of your new-found knowledge!
best regards
Gordon
Hi Gordon,
Okay here it is. I actually went for the a multiplier of 250 and like it!
Also, the main thing I wanted was that the height of the left and right columns should be equal, I don't think they both need to be (or should be) the same width.
In any case, in terms of empowered, I guess I feel that way to an extent..just hope I don't have to go through this again in Moodle 3.
Thanks again!
Tzvi
Looks good Tzvi
> hope I don't have to go through this again in Moodle 3
I shouldn't think so.
One of the founding principles of the HotPot / QuizPort / TaskChain modules is "no quiz left behind" ! By which I mean, the modules aim to offer a platform through which teachers can administer their e-learning materials without modification. As the LMS evolves, the modules also evolve in such a way that they can continue to offer a reliable delivery system.
all the best
Gordon
Thank Gordon and good to know.
Just when you thought you were done with me.. I have another "fine tuning" question to ask if I may.
First the good news, I wanted my letters bigger so I modified the CSS back to %150 and I like that as I think the letters are much clearer. I also put in my preferred fonts in the font-family and that is good as well. (See pic below.)
The one thing I would like to fine tune further is the column alignment. If you look in the previous screenshots you will see they are BOTH aligned-left. I modified the CSS to align-right in the cardstyle div and that one change made BOTH columns aligned right. My question is, is it possible for the right column to be aligned right and for the left column to be aligned left? I wouldn't consider this a major issue, but it would be nice for things to look right on both ends.
If you look at the first screen shot I uploaded from Moodle 1.9 I somehow managed to do it. I am pretty sure I did that by manually inserting HTML into the function. Here is an example of some of the old 1.9 code I was using.
F = new Array();
F[0] = new Array();
F[0][0] = '<div class="style1" style="text-align: right; font-family: david;">פֵּרַס עָלֶיהָ סָדִין</div>';F[0][1] = 1;F[1] = new Array();
F[1][0] = '<div class="style1" style="text-align: right; font-family: david;">מִפְּנֵי הַחַמָּה</div>';F[1][1] = 2;F[2] = new Array();
F[2][0] = '<div class="style1" style="text-align: right; font-family: david;">אוֹ תַּחְתֶּיהָ</div>';F[2][1] = 3;F[3] = new Array();
F[3][0] = '<div class="style1" style="text-align: right; font-family: david;">מִפְּנֵי הַנְּשָׁר</div>';F[3][1] = 4;F[4] = new Array();
F[4][0] = '<div class="style1" style="text-align: right; font-family: david;">פְּסוּלָה</div>';F[4][1] = 5;
As you can see, I put some HTML into the function manually which is probably not be the best way to go...
Tzvi
> I modified the CSS to align-right in the cardstyle div
> and that one change made BOTH columns aligned right.
I suggest you remove that modificatiom. From what I can see, you don't need it, because although the default alignment setting for the CardStyle class "text-align: left", if you check the JMatch -> Options -> Configure Output -> Other -> Special processing for RTL languages, then JMatch will detect the Hebrew text and put it inside a <p class="RTLText"> so that it appears aligned to the right in the HTML file. For a similar reason you can also remove the <div> tags you have added to the Hebrew items. Let JMatch do that for you.
If you want further help, please share your jmt file and three modified Hot Potatoes source files (put them in a single zip file and attach it your next post).
Gordon