Centering JQuiz questions in HotPotatoes

With screen sizes getting bigger and resolutions getting higher, this issue becomes more and more relevant. Centering your JQuiz questions may give you a heck of a headache if you are just beginning to tap into hacking your HotPotatoes.

This tutorial has been partly motivated by a recent call for help on the HotPot Moodle forum outlink, and will show you how to center the Short Answer, Multiple Choice and Multi-select questions in a HotPotatoes quiz. See the demo first.

Preparation

In your HotPotatoes source folder, find hp6.cs_ and jquiz6.ht_ files and copy them to the folder with your modifications - mine is modified\centered-quiz. Get your editor ready. I use Notepad++ outlink.

Centering the Question text

We're going to change the typical layout of a HotPotatoes JQuiz now.

Open the hp6.cs_ file from the folder \centered-quiz in the editor, find this piece of code, and change the text alignment to center as in the example below.

.QuestionText{
text-align: center; /* centered question, Stan Bogdanov, 20 May 2011 */
margin: 0px;
font-family: [strFontFace];
font-size: [strFontSize];
}

It will give you the following result.

centered question text and images in HotPotatoes JQuiz

Centering the Short Answer text box and the buttons

To center the Short answer text box as well as the buttons, find this chunk of code in hp6.cs_ , and add text-align:center;

div.ShortAnswer{
padding: 1em;
text-align:center;
}
/* centered Short Answer text box and buttons Stan Bogdanov, 20 May 2011 */

This change will produce the following result

centered text box and buttons in HotPotatoes JQquiz

Centering the Multiple choice and Muliselect options

Centering these is a little different business. The Multiple choice and Multiselect options are lists, and therefore they can never be centered beautifully on the page in the same way as the Short Answer type, because they depend on the length of each list item's contents. Here's a trick to display them as if centered.

Open the jquiz6.ht_ file from the folder modified in the editor, find this piece of code, and introduce a new DIV wrapping the [strQuestionOutput], as in the example below.

<div style="width:30%; margin-left:auto; margin-right:auto;">
[strQuestionOutput]
</div>

Why do we do that? Let me explain. By introducing a new DIV we wrap all quiz questions in a block. Setting the left and right margins to auto positions the entire DIV in the middle third of the page occupying the 30% width we gave it. The multiple choice and multiselect options are left-aligned within the 30% of the DIV but it displays in the centre of the page. See the demo.

centered multi-select in HotPotatoes JQquiz

Creating the exercise

Open JQuiz, input your questions; configure as usual. Then tell JQuiz to use your modified source files - press Shift+Ctrl+Alt+S, browse for the folder modified\centered-quiz, Save and export to a web page.

A few considerations

Instead of %, you may use px, but it will make your page more inflexible, less fluid. On occasions, you'll have a very wide image and then you'll have to adjust the width % to fit the width of the biggest image; text will wrap inside, so don't worry too much.

If your exercises are meant for display on handheld devices for mobile learning, design accordingly for their resolutions. Surely, some planning should go into the visual design of your HotPotatoes exercises.

Good luck! And tell me what you think.