0

まず最初に悪い質問で申し訳ありません、私はそれを一文でうまく書く方法がわかりません。

これが私のシナリオです。3つの写真が画面に表示され、単語とともに表示されるゲームを作成しています。これらの写真と言葉はデータベースから来ました。

データはデータベースに入力されるため、単語が入力されるたびに、画像も一緒にアップロードされます。

これらの単語と画像のセットはすべてデータベースから取得され、JavaScript 配列に入れられます。次に、配列から 3 つの画像をランダムに選択して別の配列に配置し、2 番目の配列から 1 つの単語をランダムに選択しました。

私の質問は、私が選択した単語を正しい画像にリンクする方法です。ユーザーが正しい画像をクリックすると、「よくできました」のようなことが画面に表示されますか?

これが私の配列レイアウトです: -

   var items = [
          {name:'Coch',image:'upload/coch.png'},                                                                                   {name:'Glas',image:'upload/glas.png'},
     {name:'Melyn',image:'upload/melyn.png'},{name:'Ci',image:'upload/dog.jpg'},
      {name:'Cath',image:'upload/cath.jpg'},{name:'Gwyrdd',image:'upload/gwyrdd.png'},
     {name:'Un',image:'upload/un.jpg'},{name:'Dau',image:'upload/dau.jpg'},
     {name:'Tri',image:'upload/tri.jpg'},{name:'Bochdew',image:'upload/bochdew.jpg'},
     {name:'Piws',image:'upload/piws.png'}      ];

これが私の完全なコードです:-

       <!DOCTYPE html>

      <html lang="en">

             <div id="choosecat">
             <form method="get" action="playgame.php"       autocomplete="off">

                       <fieldset>
                          <legend>Choose Category</legend> 


                          <label>Category: <select name="topic">

                          <option value="%">All</option>
                           <option value="Animals">Animals</option>
                          <option value="Numbers">Numbers</option>
                          <option value="Colours">Colours</option>

                           </select></label>

                           <input type="submit" id="submitbutton" value="Go" />

                      </fieldset>


                        <br />




                  </form>


                  <?php 

                    $topic = $_GET['topic'];

                   $topic_choice = htmlspecialchars($topic,  ENT_QUOTES);



                   ?>


                        </div>

        <head>
              <title></title>



        <link rel="alternate stylesheet" type="text/css" title="red"
           href="gameplay.css">

        <link rel="stylesheet" type="text/css" title="blue"
       href="theme1.css">

      <link rel="alternate stylesheet" type="text/css" title="pink"
    href="theme2.css">

    <script src="js/stylesheets.js" type="text/javascript"></script>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/javascript.js" type="text/javascript"></script>


      <script>

   var items = [
      <?php
       $con = mysql_connect("localhost","admin","password");
      if (!$con) {
        die('Could not connect: ' . mysql_error());
       }
      mysql_select_db("learning_game", $con);
      $result = mysql_query("SELECT * FROM data WHERE category LIKE '$topic_choice' ");
      $first = true;



      while ($row = mysql_fetch_array($result)) {
        if (!$first) {
          echo ",";
        }
        $first = false;
        echo "{name:'" . $row['word'] . "',image:'" . $row['image'] . "',video:'" .     $row['video'] . "',audio:'" . $row['audio'] . "'}";
    }
      mysql_close($con);
      ?>
     ];
    for (var i = 0; i < items.length; i += 1) {
        //document.getElementsByTagName('div')[0].innerHTML += items[i].name + " / " + items[i].image + "<br />\n";
        }  

           document.write("<br /> <br /> <br />");





    console.log(items);
    top.items = items;

        var images = new Array();
         var list = document.getElementsByTagName('div')[0];
         var names = new Array()
        var videos= new Array()
        var audios= new Array()

             for(i = 0; i < 3; i++) {

          // Choose a random item and removes it from the array
            var item = items.splice(Math.floor(Math.random() * items.length), 1)[0];

           // Create the image element and set its src attribute
           images[i] = document.createElement('img');
          images[i].src = item.image;

          videos[i] = document.createElement('video');
          videos[i].src = item.video;
             //video.controls = true;


              audios[i] = document.createElement('audio');
             audios[i].src = item.audio;
             //audio.controls = true;

             // var audio = new Audio(video);



             // Add it to your container element

           images.src = item.image;
            videos.src = item.video;
        audios.src = item.audio;
        names[i] = item.name;




          }
         var randomIndex = Math.floor(Math.random() * 3);
          var name_to_display = names[randomIndex];
         var image_to_display = images[randomIndex];
        var video_to_display = videos[randomIndex];
        var audio_to_display = audios[randomIndex];


      var data = new Array();


   document.getElementById("one").appendChild(images[0]);
   document.getElementById("two").appendChild(images[1]);
   document.getElementById("three").appendChild(images[2]);


       document.body.appendChild(audio[0]);
  document.getElementById("whitebox").appendChild(video[1]);
   document.getElementById("whitebox").appendChild(video[2]);


    /*document.getElementById("one").appendChild(data.image[0]);
    document.getElementById("two").appendChild(data.image[1]);
     document.getElementById("three").appendChild(data.image[2]);
   */



          </script>

       </head>

       <body onload="set_style_from_cookie()">
        <div id="container">




            <div id="header">
                <br />
                <img id="mabon" src="mabon.png"/>

            </div>

                       <div id="radio">
                          <input class="centerradio" type="checkbox"  name="theme" onclick="switch_style('red');return false;" value="Main">Mabon A Mabli
                            <input id="top_radio_button" class="centerradio" type="checkbox" name="theme" onclick="switch_style('blue');return false;" value="Blue Theme">Pastel <br>
                          <input class="centerradio" type="checkbox" name="theme" onclick="switch_style('pink');return false;" value="Pink Theme">Plain<br />
                       </div>

                     <div id="change_cat">




           <div id="random">


           <div class="wrapper">
               <div id="one" class="item"></div>

             <div id="two" class="item"></div>

               <div id="three" class="item"></div>

          </div>


          <div id="wordwrapper">

              <div id="worddiv">

                  <p id="wordtext"><script>document.write('-- '+name_to_display+' --');</script></p>

             </div>



          </div>


       <div id="videocorner">
        Video Corner
       </div>   

       <div id="videodiv">
          <video width="300" height="230" controls>
               <source src="bbc_three.mp4" type="video/mp4">
               <source src="movie.ogg" type="video/ogg">
               Your browser does not support the video tag.
          </video>
      </div>




      <div id="linkdiv">
               <a href="#" id="link" class="myButton">Makaton</a>
          </div>




              <div id="sounddiv">
      <!--
    <audio autoplay="3" controls>
      <source src="hover.wav" type="audio/wav">
     <source src="hover.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
      </audio>
        -->




     </div> 
       <img src="cartoon.png" id="help" height="200px">
     </div>     











      <div id="whitebox">
        <script>

            </script>
      </div>


          <div id="disp">

       <script>
         var audio = document.createElement('audio');
               audio.src = audio_to_display.src;
         //audio.src = item.audio;
         audio.controls = true;
         document.getElementById("disp").appendChild(audio);
     </script>



      <script>
                document.getElementById("one").appendChild(images[0]);
          document.getElementById("two").appendChild(images[1]);
         document.getElementById("three").appendChild(images[2]);


         var video = document.createElement('video');
         video.src = video_to_display.src;
         //video.src = item.video;
         video.controls = true;
         document.getElementById("disp").appendChild(video);
        </script>

          </div>

        </body>
     </html>

コードの品質について申し訳ありません。Javascript と Web 開発は初めてです。

返信ありがとうございます。

4

1 に答える 1

0

基本的に、次の 3 つが必要です。

  1. それが何であるかを識別する各画像の alt タグ
  2. 画像の 1 つの alt タグに対応する正解の ID
  3. 画像の ID を正しい答えと比較し、正しい場合はアラートを表示する各画像のクリック機能。

だから、このようなもの：

// Create the image element and set its src attribute
images[i] = document.createElement('img');
images[i].src = item.image;
images[i].alt = item.name;
images[i].onclick = function(e) {
    if (e.target.alt == name_to_display)
    {
        alert('good job!');
    }
};

次のような画像タグを作成する必要があります。

<img alt="Brown Dog" src="/images/browndog.jpg" />

クリックすると、その alt タグの値と保存された name_to_display (正解の値を保持するつもりだったと思います) を比較し、同じ場合はアラートを表示します。name_to_display が正しい範囲内にある場合、これは機能するはずです。

于 2013-03-29T22:10:11.440 に答える