5

私のスペリングゲームでは、常に新しい単語が追加されるので、スペリングする単語の新鮮な選択が常にあります。

ゲームに追加された各単語には、ゲームプレイで正しいスペルを取得するようにユーザーに促す画像と音声への「src」があります。

ゲームの作成が完了したら、新しい単語を追加する作業は同僚の1人に任されています。これは、彼が単語だけでなく、写真と音声のリンクを追加する必要があることを意味します。

彼らはこの種のことについてほとんど知識がないので、私は彼が単語を追加するときに画像と音声をできるだけ簡単に追加できるようにしたいので、彼がこれらすべてのものを保存する共有場所へのデフォルトパスを作成します。

このようにして、単語に「bug」、画像に「.bug-pic」、サウンドに「.bug-audio」と入力するだけで、HTMLに簡単に追加できます。

これはそれを行うための最良の方法ですか？

彼らがこれらのものを入力するための最も簡単な方法は何でしょうか？

これが私が現時点で単語、音、画像を保存する方法です...

<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>

ありがとう

4

7 に答える 7

3

ここであなたの型を少し壊して、長期的には私にとって十分にシンプルに見えるものを提案します（少なくとも、ここにあるものよりもシンプルです）。

HTML マークアップを使用して単語を保存する際の問題点は次のとおりです。

  1. それは HTML です --- ブラウザはこれを解析する必要がありますが、要素を次のように取得しているため (これは無駄な労力です)、それを表示しません。<ul>display:none
  2. XML (または HTML のいずれか) は、情報を表すために必要なテキストが大量にあるという意味で、かなり肥大化しています。スペリング ゲームに参加する場合は、そのような単語が数百または数千あり、単語の HTML 表現は帯域幅の膨大な負荷になると想定しています。

そう！これが私が提案するものです：

// 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" }
];

これは、Javascript オブジェクトのコレクションを保持する単純な Javascript 配列です。各オブジェクトにはword、 、audioおよび の 3 つのプロパティがありpicます。

そのファイルをページにロードし、そこからスクリプトを読み取ります。ページのトラバース、使用、適用がはるかに簡単かつ迅速になります。一般に、JS オブジェクトとの間での読み取りは、DOM から同じ情報を解析して読み取るよりも高速です。

さらに、マークアップはよりコンパクトになり、HTML DOM を (ほぼ間違いなく) すべきでないことのために [誤用] することはありません。

第 3 に、HTML マークアップよりもはるかに整理されていて見やすく、同僚が更新して適応するのがはるかに簡単になると思います。

最後に、このアプローチの良い点の 1 つは、コードをモジュールに書き込むのがいかに簡単かということです。そのため、拡張やワード パックなどを簡単に扱うことができます。

// 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" }
        // ...
    ]);

})();

アイデアは、words.jsファイルをゲームにロードでき、完全に機能するということです。ただし、ユーザーが新しい単語 (動物を表す単語など) を追加したい場合は、補助ファイルをロードして基本単語リストを増やすことができます。

これは、HTML マークアップよりも JS オブジェクトの方がはるかに簡単です。

編集

本当に最終的な回答で HTML を使用する必要がある場合は、data-word属性を切り捨てて<li>代わりにテキスト値を使用することをお勧めします。

<li data-audio="dog.wmv" data-pic="dog.jpg">dog</li>
于 2012-09-03T13:04:51.297 に答える
3

次のように情報を保存することをお勧めします。

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

jsFiddle を読んだ後、次のように playAudio 関数を作成することをお勧めします。

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

その後、これを置き換えることができます：

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

このようなものによって：

playAudioFile(listOfWords[rndWord].audio);
于 2012-08-31T10:33:28.747 に答える
2

私の意見では、データベース、サーバー サイド スクリプト、および同僚用のフォームを使用できます。情報をサーバーにアップロードし、パスをデータベースに保存するために使用するフォームを作成します。

フォーム：

<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>

スクリプト：

<?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 );
    }
?>

もちろん、データベースには、これらの 3 つの値といくつかの ID を格納するテーブルが必要です。

于 2012-09-07T03:30:59.417 に答える
2

利用できるサーバー側のテクノロジーも検討する必要があるかもしれません。

html を介してオプションを追加する必要がある場合、ページのその部分でおそらくできることは、サーバーによって動的に生成された html 要素を持つことです。

'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
%>

これは ASP の典型的な例にすぎません。使用しているプラ​​ットフォームに固有の他の例を見つけることができると確信しています。

しかし、基本的には...ドロップインアンドゴー操作にしたい場合は、サーバーに何かが出力ページに何が利用可能かを伝える必要があります。それ以外の場合は、これまでと同じように html を実行している可能性があります。テクノロジーが常に昔ながらのデータ入力に取って代わるとは限りません。

于 2012-09-04T20:28:21.573 に答える
2

attr()デフォルトの場所に画像を保存するために使用する必要があります。ここでは、画像を保存するデフォルトの場所について説明します。

于 2012-08-29T09:07:59.097 に答える
1

JavaScriptで次のようにリストにエントリを追加できると思います：

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

NewLI.innerHTML = "this is a test";

Parent.appendChild(NewLI);
}

ここから見つけました：http://bytes.com/topic/javascript/answers/520885-add-new-list-item

友達がエントリを追加できるように、名前、場所、写真を入力フィールドに入力し、この js 関数のようなものを使用して新しい子エントリを追加することをお勧めします。

于 2012-08-31T10:40:38.247 に答える
0

PHP を使用してサーバーにアクセスできる場合は、それらすべての項目を配列に入れてからループすることをお勧めします。

ここに例を書きました：

<?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>
于 2012-09-07T09:01:02.040 に答える