Create Word Meaning HTML page using HMTL5 and compare answers from xml

StackOverflow https://stackoverflow.com/questions/23473519

Frage

I have a list of word and correspondingly meanings

What i want is to design the page in HTML5 in the following manner : enter image description here

Also want to check the answers from xml file using javascript. But the problem here can be how do i get the draggable value from the draggable location of corresponding word.

Please help.

War es hilfreich?

Lösung

JSFIDDLE

U can use text, either an image

I think this is what you need.

Enjoy WebDesigning. :)

Andere Tipps

HTML code : 

<!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 is in this format :

<?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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top