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 pleted 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=".svg.med.png"></li>

    <li data-word="cat" data-audio="file:///C:/smilburn/AudioClips/cat.wav" data-pic=".svg.med.png"></li>

    <li data-word="dog" data-audio="file:///C:/smilburn/AudioClips/dog.wav" data-pic=".svg.med.png"></li>

    <li data-word="bug" data-audio="file:///C:/smilburn/AudioClips/bug.wav" data-pic=".svg.med.png"></li>

    <li data-word="rat" data-audio="file:///C:/smilburn/AudioClips/rat.wav" data-pic=".png"></li>

    <li data-word="dad" data-audio="file:///C:/smilburn/AudioClips/dad.wav" data-pic=".png"></li>

  </ul>

THANKS

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 pleted 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./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./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./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./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./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./cliparts/H/I/n/C/p/Z/bald-man-face-with-a-mustache-md.png"></li>

  </ul>

THANKS

• javascript
• jquery

• 1 Why are using "file:///C:/", is this app not going to be on the internet? Also, what server side language are you using? – Undefined Commented Aug 31, 2012 at 10:35
• Yes but this is just tempory while I make it @Sam – sMilbz Commented Aug 31, 2012 at 10:41
• I don't see that is the "server side" @sMilbz --BTW I would remend you build an interface for them to do this. – zinking Commented Sep 7, 2012 at 2:25

7 Answers 7

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./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./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./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 pact, 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 remend 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>

I would remend, 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 remend you crate a playAudio function like this:

function playAudioFile (audioFileName) {
    audioFileName = "http://www.wav-sounds./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);

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

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.

Well, in my opinion, you can use a database, a server side script and a form for your colleague. Create a form which he will use to upload the information to the server and store the paths into the database.

The form:

<form method="POST" action="myscript.php" enctype="multipart/form-data">
    <p>Word:<input type="text" name="my-word" id="my_word"></p>
    <p>Audio:<input type="file" name="audio" id="my_audio" /></p>
    <p>Picture:<input type="file" name="picture" id="my_picture" /></p>
    <p><input type="submit" name="submit" value="Submit" /></p>
</form>

The script:

<?php
    $conn = mysql_connect("your_host", "your_user", "your_pass") or die (mysql_error());
    mysql_select_db("your_database", $conn) or die (mysql_error());

    if( ( $_FILES[ 'audio' ][ 'error' ] > 0 ) || ( $_FILES[ 'picture' ][ 'error' ] ) ){
        echo "Error" . "<br />";
    }
    else{
        move_uploaded_file($_FILES["audio"]["tmp_name"], "your/upload/directory/for/audio/" . $_FILES["audio"]["name"]);
        move_uploaded_file($_FILES["picture"]["tmp_name"], "your/upload/directory/for/images/" . $_FILES["file"]["name"]);
        mysql_query( 'INSERT INTO your_table ( word, audio, image ) values ( "' . $_POST[ 'word' ] . '", "' . $_FILES[ 'audio' ][ 'name' ] . '", "' . $_FILES[ 'picture' ][ 'name' ] . '" )', $conn );
    }
?>

Of course your database should have a table which stores those 3 values plus some id.

I think you can add more entries to a list like this in javascript:

function addLI(id){
var Parent = document.getElementById(id);
var NewLI = document.createElement("LI");

NewLI.innerHTML = "this is a test";

Parent.appendChild(NewLI);
}

which I found from here: http://bytes./topic/javascript/answers/520885-add-new-list-item

I remend having input fields with the name, location and picture for your friend to add more entries with, then use something like this js function to add a new child entry.

If you have access to a server with PHP, I would suggest putting all them items in a array and then looping through them.

I have written an example here:

<?php
    $wordsArray = array(
            array('word'=> 'randomword' , 'audio' => 'test.mp3', 'picture' =>'pic.jpg'),
            array('word'=> 'randomword2' , 'audio' => 'test2.mp3', 'picture' =>'pic2.jpg')
        );

        $html = '';
        foreach($wordsArray as $word){
            $html .= '<li data-word="'.$word['word'].'" data-audio="'.$word['audio'].'" data-pic="'.$word['picture'].'"></li>';
        }
?>
    <html>
        <head>
            <title></title>
        </head>
        <body>
            <ul>
                <?php echo $html; ?>
            </ul>
        </body>
    </html>