Adding new words to the game

Question

In my spelling game new words will be added all the time so there is always a fresh selection of words to spell.

Each word added to the game has a "src" to an image and a sound that will prompts the user into getting the spelling correct in gameplay.

When I have completed making the game, the job of adding the new words in is down to one of my colleagues. This means he will have to add a link for the pic and audio as well as the word.

As they have little knowledge with this sort of thing I want to make it as easy as possible for him to add the images and sounds when adding the words I want to create a default path to a shared location where he will store all this stuff.

This way he can just type in "bug" for the word, ".bug-pic" for the picture and ".bug-audio" for the sound making it simple for him to add into the HTML.

Is this the best way to do it?

What would be the simplest way for them to input these things?

Here is how I store the word, sound and image at the moment...

<ul style="display:none;" id="wordlist">

    <li data-word="mum" data-audio="file:///C:/smilburn/AudioClips/mum.wav" data-pic="http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png"></li>

    <li data-word="cat" data-audio="file:///C:/smilburn/AudioClips/cat.wav" data-pic="http://www.clker.com/cliparts/c/9/9/5/119543969236915703Gerald_G_Cartoon_Cat_Face.svg.med.png"></li>

    <li data-word="dog" data-audio="file:///C:/smilburn/AudioClips/dog.wav" data-pic="http://www.clker.com/cliparts/e/9/4/1/1195440435939167766Gerald_G_Dog_Face_Cartoon_-_World_Label_1.svg.med.png"></li>

    <li data-word="bug" data-audio="file:///C:/smilburn/AudioClips/bug.wav" data-pic="http://www.clker.com/cliparts/4/b/4/2/1216180545881311858laurent_scarabe.svg.med.png"></li>

    <li data-word="rat" data-audio="file:///C:/smilburn/AudioClips/rat.wav" data-pic="http://www.clker.com/cliparts/C/j/X/e/k/D/mouse-md.png"></li>

    <li data-word="dad" data-audio="file:///C:/smilburn/AudioClips/dad.wav" data-pic="http://www.clker.com/cliparts/H/I/n/C/p/Z/bald-man-face-with-a-mustache-md.png"></li>

  </ul>

THANKS

Answer 1

I'm going to break your mold a bit here, and suggest something that looks simple enough for me in the long run (at least, simpler than what you have here).

The problems with using HTML markup to store your words is that:

1. it's HTML --- the browser will have to parse this, but then not display it because you've got the <ul> element as display:none (it's just sort of wasted effort), and
2. XML (or HTML, whichever) is pretty bloated, in the sense that there's a lot of text needed to represent information. If you're going for a spelling game, I'm assuming that you'll have hundreds, or thousands of such words, and the HTML representation for your words will be a huge crapload of bandwidth bloat.

So! Here's what I'd suggest:

// create an external JS file to store your words,
// let's say, [words.js].

// then let's just store your words in an array
var words = [
    { word : "foo" , audio : "file:///C:/smilburn/AudioClips/foo.wav", pic : "http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png" },
    { word : "bar" , audio : "file:///C:/smilburn/AudioClips/bar.wav", pic : "http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png" },
    { word : "mum" , audio : "file:///C:/smilburn/AudioClips/mum.wav", pic : "http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png" }
];

It's just a plain Javascript array that holds a collection of Javascript objects. Each object has three properties: word, audio and pic.

Load that file into your page, and have a script read from that. It'll be much easier and faster to traverse, use and apply to your page. Reading to and fro a JS object is generally faster than having to parse and read the same information from the DOM.

Additionally, the markup is more compact, and you're not [misusing] HTML DOM for something it (arguably) wasn't supposed to be doing.

Thirdly, it's much more organized and cleaner to look at than HTML markup, and I imagine that that will be much easier for your colleagues to update and adapt to.

Lastly, one nice thing about this approach is how easy it is to write your code into modules, so you can work with stuff like expansions / word packs easier:

// something like this can work:

// [words.js]
var words = [
    // some base words
    { word : "foo", audio : "foo.wmv", pic : "foo.pic" }
    // ...
];

// [words.animals.js]
(function () {
    // do not do anything if the base [words.js] isn't loaded
    if (!words) { return; }

    // extend the base words
    words = words.concat([
        // new animal words!
        { word : "dog", audio : "bark.wmv", pic : "brian.jpg" }
        // ...
    ]);

})();

The idea being, you can load the words.js file into your game and it'll work perfectly. However, if the user would also like to add new words (say, words for animals) then they (you) can just load auxiliary files to augment your base words list.

This is much easier to do with JS objects than with HTML markup.

EDIT

If you really positively final-answer must have to use HTML, I recommend chopping off the data-word attribute off your <li> and just use it's text value instead.

<li data-audio="dog.wmv" data-pic="dog.jpg">dog</li>

Answer 2

I would recommend, that you simply store the info like this:

<li data-word="mum" data-audio="mum.wav" data-pic="/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png"></li>

After reading your jsFiddle i would recommend you crate a playAudio function like this:

function playAudioFile (audioFileName) {
    audioFileName = "http://www.wav-sounds.com/cartoon/" + audioFile;
    $("#mysoundclip").attr('src', audioFileName);
}

after that you can replace this:

$("#mysoundclip").attr('src', listOfWords[rndWord].audio);
audio.play();

by something like this:

playAudioFile(listOfWords[rndWord].audio);

Answer 3

You have to use attr() to store images in default location. Here they explain the default location to store images.

Answer 4

You might want to consider what server side technology you'll have available too.

If you have to add the options through html, then what you can probably do in that portion of the page, is have the html elements generated dynamically by the server.

'ASP Classic example

<%
set fs = server.createObject("scripting.filesystem")
set folder = fs.getFolder("your path here")
for each file in folder.getFiles("*.wav")
 strWord = left(file.name, length(file.name)-4)
%><li data-word="cat"
    data-audio="path/to/folder/<%=strWord%>.wav"
    data-pic="path/to/folder/<%=strWord%>.png"></li>
<%
next
%>

This is just an asp classic example, I'm sure you'll find others out there specific to the platform your using.

But basically... you have to have SOMETHING on the server tell the output page what is available if you want to make it a drop-in-and-go operation. Otherwise you might as well be doing the html as you have been. Technology isn't always going to replace plain ol data entry.