0

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

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

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

彼らはこの種のことについてほとんど知識がないので、彼が単語を追加するときに画像と音声をできるだけ簡単に追加できるようにしたいと思います.

このように、単語には「bug」、画像には「.bug-pic」、音声には「.bug-audio」と入力するだけで、HTML に簡単に追加できます。

これが最善の方法ですか？

これらを入力する最も簡単な方法は何ですか?

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

4

1 に答える 1

1

つまり、つづりが必要な単語を示す「光る」文字を含む表は、私たちが修正しようとしているビットですよね?

そして、単語をそのテーブルの幅に「ラップ」したいですか?

<td>s 'data-word=' 属性のそれぞれからデータを取得していることがわかります。これは、html5 の div に簡単に属性を付けることができます。テーブルでなければならない特別な理由はありますか？それ以外の場合は、固定幅のラッパー div を使用し、<td>s を float:left を設定した子 div に置き換えることができます。これらは、指定された単語の文字に対する最後のインラインがどこにあるかに関係なく、自動的に「ラップ」します。つまり、改行して単語を分割します。

<style>
    .letters_wrap{
        width:500px;
        height:auto;
        ...
     }

     .letter{
        width:50px;
        height:50px;
        float:left;
        ...
    }

</style>

<div class="letters_wrap">
    <div class="letter" id="letter_1" data-word="shin">s</div>
    <div class="letter" id="letter_1" data-word="shin">h</div>
    <div class="letter" id="letter_1" data-word="shin">i</div>
    <div class="letter" id="letter_1" data-word="shin">n</div>
</div>

問題が何であるか、そしてあなたが達成しようとしていることについて、少なくとも私がスティックの正しい端を持っているかどうか教えてください.

S

アップデート

@m0onio - デモ ページでは、php ファイル (したがってワードリスト) をボタンにロードする関数をバインドしました。

$(document).ready(){}DOM が使用可能になったら、関数内で関数を実行して、単語リストを含む JavaScript 配列を使用可能にします。

</body>グリッド内の子 div の構築を処理し、php ファイル (wordlist) をロードする .load() のコールバック関数から呼び出すには、javascript 関数 (終了タグの前に含まれる) を記述する必要があります。

音声と画像を添付するには、txt ファイルにもその情報を含めて、ファイルの内容が次のように実行されるようにします。画像ファイル名 | サウンド ファイル名を入力し、配列をループすると、最初の要素はすべて単語、2 番目は関連する画像、3 番目はサウンド ファイルなどであることがわかります。次に、jquery を使用して、結果の要素 (子 div) を親コンテナーに追加します。わかる？

于 2012-09-04T11:08:38.773 に答える