Task 4: Using an external stylesheet

1.

First, we're going to use the Masher program to create an external stylesheet. Start the Masher, then click on the Appearance tab. Choose the colours and settings you want to use. Then click on Actions / Create complete HotPot stylesheet. Save the stylesheet in the same folder as the exercises you have created. Call it external.css.

2.

Find the Hot Potatoes source folder, and copy the jmix6.ht_ file into your custom source folder. Open this file in your text editor.

3.

Our task here is to prevent JMix from adding the normal stylesheet into the exercise itself. Search for these three lines:

<style type="text/css">
[strStyleSheet]
</style>


Delete these lines, and add a comment to explain what you've done:

<!-- MDH_Custom: Deleted the placeholder for the internal stylesheet, in order to use an external one. -->

[strStylesheet] is the "placeholder" that is replaced by the CSS code when JMix creates the exercise; if it's not there, then the CSS code will not appear in the page.

4.

Start JMix, and tell the program where to look for your custom source files. (Press Control + Alt + Shift + S, then find and select your hp_custom_source folder.)

5.

Now make a little JMix exercise to test with. It doesn't matter what goes in it; "This / is / a / test" will do.

6.

Now we need to insert the link to the external CSS file into the page. Go to the Configuration screen, and click on the Custom tab. In the box at the bottom, "Code for insertion into <head> tag", type the following:

<link rel="stylesheet" type="text/css" href="external.css" />

7.

Press OK to exit the Configuration screen, then export your exercise and make sure you save it in the same folder where you saved the external.css file. The exercise should look the same, but it is different. You can prove this by temporarily renaming the external.css file so the browser can't find it. Here's an example.