15 Common Mistakes When Making HotPotatoes Exercises

What are they and how to avoid them?

I. Code, Tech, and Bad habits

#1 Copy-Paste

By far the most common mistake people make. Copy-Pasting, especially from MSWord, in any of the HotPotatoes retains the original formatting. As a result text that breaks to the next line also breaks in HotPotatoes because the line breaks are converted to <br /> tags. This may not be a big deal with text, but it does break the functionality when you Copy-Paste HTML or javascript code to insert, for example audio and video.
How to avoid: Copy-Paste in a text editor first (like Notepad++ ☍) to clear the formatting and then copy-paste again into HotPotatoes.

#2 Smart quotes vs. Dumb quotes

Another problem here is smart quotes vs. dumb quotes. Very often people do not recognize smart quotes in code which they've copy-pasted.

Smart quotes are used in typography. So historically we've inherited the smart quotes in word processors, I'm quoting here, from "a function found in several word processors that automatically converts straight quotes typed by the user into curved quotes, attempting to be "smart" enough to determine which typed quotes are opening and closing. Further, the "smart quotes" feature converts opening apostrophes (such as in 'tis, 'em, 'til, and '89) into opening single quotation marks—essentially upside-down apostrophes." (Read more about quotes in ASCII and Unicode on Wikipedia ☍.)

How to avoid: watch out for these - smart quotes are curly or slanted depending on the font face. This is a double smart quote in a non-serif font type ( “ ” ) and in a serif font type ( “ ” ) - the left and the right are different, while the dumb quotes are straight and look identical ( " ... " ) . HTML, javascript , etc. use ordinary, straight double quotes and the single quote (also used as apostrophe).

#3 Linking to local files on your computer

This is another common mistake. When you link to images, players and sound files on your local machine, the path to the image looks something like that C:\user\..\..\image-file.jpg. When the exercise is uploaded to the server the image file to be displayed will be looked for in the same folder structure, the browser attempting to fetch from the directory called C:\user\..\..\. and of course, there isn't such a file, and your directory structure on the server is different.

How to avoid: Option one is to dedicate a folder to all your images from within which you'll link in the HotPotatoes exercises. This is particularly useful for images that you can reuse for more than one exercise. The other option is to put the dependent other media in the same directory as the exercise, so you always know that the images and other files that go with this exercise live in the same folder. This option is very safe but it will take space on your server because you have duplicate files all around. The same applies to sound files and players. Whichever of the two, just plan in advance.

#4 XXXL images

I don't come across this very often these days, but I myself used to make this mistake as a beginner. Besides, image editors weren't in abundance and the only one available was quite pricey in the late 90's. Instead of using an extra large image 1000px by 2000px, which you scale down in the exercise to width="100" height="200", open your image editor and resize the picture to 100x200px. You'll be saving bandwidth and storage space.

#5 Forgetting to upload other media

You'll be amazed how often this happens, even to more advanced users. When you have images and other files, like javascript files, players, etc. which you use in the exercise, make sure you upload them along with the exercise to the appropriate directory on your server.

#6 Linking to media on other sites

This is absolutely unreliable! You never know when the image or video will disappear as you do not have control over other people's media files. Even videos on Youtube disappear! But you knew that, didn't you? So link to external media only if you cannot obtain a copy.

#7 Forgetting to Save before you export as a web page

Don't laugh, people do forget, especially when they tweak little thingies and they are so absorbed in the making of the exercise. So hit that Save button every now and then, especially right before exporting the exercise. Make it a routine - Save and Export! Don't export without saving first.

#8 File names

Another very common mistake that novice users make is typing spaces in the file names, e.g. weekly quiz.htm . This really is disliked by servers and you get quite a different url. This file will display as http://server/directory/weekly%20quiz.html. Got the difference?

The other issue with file names is capitalization. On some servers Image.jpg, image.jpg, image.JPG makes no difference, on others these are different files. The best practice here is to use lowercase for both file names and file extensions.

#9 Errors in the code

We often want some small enhancements and we introduce html tags. However, for a novice who is just beginning to learn html or css it's very easy to follow bad practice they have seen on the web. Or because of little, but not enough knowledge, they make errors when writing their own html. Some of the very common code errors are unclosed tags, overlapping tags instead of nesting them, typos, illegal or un-escaped characters.

How to avoid: Learn from the best. And learn best practices from the beginning, because once you learn something the wrong way, it becomes a habit and it's difficult to un-learn. We've iterated that on the list - validate, Validate, VALIDATE! W3C Validator ☍ is your best friend when it comes to debugging. And you'll learn a lot on the way. w3schools ☍ is also the best place for reference!

II. Design mistakes

#10 Not choosing colours or choosing inappropriate colours in a scheme

By not choosing colours, you end up with the default grey and black set in the interface of HotPotatoes. Even if you stay with the default colours, think of introducing a third colour to emphasize.

Similarly, some users overuse colours and make their exercises too colourful, too busy, and therefore too tiring for the eye. Or, some choose colours which do not combine very well. You may read The importance of colours ☍ or look for more design topics on the internet. Do not underestimate the power of aesthetics!

#11 Font type

Beginning exercise developers like more fancy fonts. Please, spare me the Comic Sans! Unusual fonts pose some dangers because the exercises will probably be viewed on different computers with different browsers; and fonts used by Windows OS are different from those on iOS. The web makes use of the so-called web-safe fonts, that is fonts present on all computers and therefore providing consistency across the different OS and devices.

Another issue is the use of serif fonts - these may be reserved for headings and used sparingly. San-serif fonts are way more legible and must be used for the text in an exercise.

Yet, if you want something less common, you can try Google fonts ☍. The added value is that you won't be hosting the font, but you'll still have a very distinct set of exercises.

Unless you have a specific reason to use a special font, as does Alan Hess who uses OpenDyslexic for his students ☍, stick to the "Arial, Helvetica, sans-serif" combination.

#12 Font size

Declaring font sizes in px or pts is common practice. However, these are fixed sizes and the browser will display them as the declared size ... Have you seen 10pt Verdana on a 16:9 21" monitor? I bet you can't read it without a magnifying glass. Or zooming with Ctrl and +.

A much better option is to declare font sizes in em's, or even best - use %, say 130% for titles and 110% for Headings level 2, and 96% for text depending on your font family of choice. You'll be catering for all the device screens - 240px wide portables to the 98" LED Backlit Ultra High Definition 3840x2160 Professional-Grade Large Screen Display. Plan accordingly!

III. Pedagogy and Usability

#13 Autoplaying sound

This is a very frequent request - "Can I autoplay sounds?" You really shouldn't. The constant beep-blips... Imagine how annoying that would be in a self-access centre or other public places! Playing sounds must be the user's choice.

#14 Assuming HotPotatoes creates tests

While you may mimic a test-like environment and achieve a functionality that is similar to a test, HotPotatoes were designed as learning exercises, not tests. Besides, students can often cheat by looking at the source code.

#15 Trying to squeeze in too much content

This mistake comes in two major flavours. The first is making a 300-questions quiz with 4 multiple choice answers for each question! Trust me, I've seen this. But what's the point. I can only see one good reason for lazy teachers - each time the page loads, the quiz uses fewer than say 15 questions.

The second is when you use a long text and the student has to scroll up and down constantly.

A solution is to divide the text into a sequence of exercises. Or if you really must use the whole text, use one of the add-ons on this site which were developed with this limitation in mind - Virtual pagination ☍, Accordion pagination ☍.

Have you made these mistakes? Admit it if you're still making some of them. Or share how you've learnt to avoid them.