0

我有一个单词列表和相应的含义

我想要的是按以下方式在 HTML5 中设计页面： 在此处输入图像描述

还想使用 javascript 从 xml 文件中检查答案。但这里的问题可能是我如何从相应单词的可拖动位置获取可拖动值。

请帮忙。

4

2 回答 2

0

HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style>
        #div1 {width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa;}
        #div2 {width: 200px; height: 10px; padding: 10px; border: 1px solid #aaaaaa;}
        #div3 {width: 200px; height: 10px; padding: 10px; border: 1px solid #aaaaaa;}
/*        #div4 {width: 200px; height: 10px; padding: 10px; border: 1px solid #aaaaaa;}*/
    </style>
    <script type="text/javascript">
        function allowDrop(ev){
            ev.preventDefault();
        }

        function drag(ev){
            ev.dataTransfer.setData("Text",ev.target.id);
        }

        function drop(ev){
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }

        function checkAnswers(){
            var connect = new XMLHttpRequest();
            connect.open("GET","word_meaning.xml" , false);
            connect.setRequestHeader("Content-type", "text/xml");
            connect.send(null);


            var fullresponse = connect.responseXML;
            var data = fullresponse.childNodes;



            for(var i=0;i<data.length ;i++){

                var list = data[i];
                var word = list.getElementsByTagName(name);
                var mean = list.getElementsByTagName(meaning);




            }

        }
    </script>
  </head>
  <body>


<!--      <p>Drag the Image Shown below : </p>

      <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


      <br/>
      <img id="drag1" src="images/logo.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69"/>-->



      <p> Word Meaning : </p>
      <ol style="list-style: none">
      <table style="margin: 2em;" id="mytable">

            <tr>
                <td style=" width: 200px;"><li><label for="word1">Astonish</label></li></td>
                <td style=" width: 200px;"><li><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></li></td>
            </tr>
            <tr>
                <td style=" width: 200px;"><li><label for="word2">Loony</label></li></td>
                <td style="width: 200px;"><li><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></li></td>
            </tr>

      </table>

          <input type="submit" value="Submit Answers" onclick="checkAnswers();"/>
          </ol>
      <p> Select the meaning from the below list :
      <table style="margin: 2em">

          <tr>
              <td style=" width: 200px;"><label id="drag2" for="meaning1" draggable="true" ondragstart="drag(event)">Crazy</label></td>
              <td style=" width: 200px;"><label id="drag3" for="meaning1" draggable="true" ondragstart="drag(event)">Amazing</label></td>
          </tr>

      </table>




  </body>
</html>

xml 是这种格式：

<?xml version="1.0" encoding="UTF-8"?>
<word-list>
    <word>
        <name>Astonish</name>
        <meaning valid="true">Amazing</meaning>
    </word>
    <word>
        <name>Loony</name>
        <meaning valid="true">Crazy</meaning>
    </word>
</word-list>
于 2014-05-05T13:24:37.287 回答
0

JSFIDDLE

U can use text, either an image

我认为这就是你所需要的。

享受网页设计。:)

于 2014-06-18T05:08:09.393 回答