2

Ajax を使用して質問応答アプリを作成しようとしています。特定の関数の作成についてサポートが必要です。さまざまな質問と回答を含む XML ファイルを作成しました。基本的な考え方は、「get」関数を使用して (1) XML 質問ファイルを読み込み、(2) 「display」および「math.random」関数を使用してランダムな「question」要素 (対応する「answer」要素は同時に表示されますが、Javascript によって非表示になります。) これは、私が使用している XML ファイルの形式です。これらのノードは、親ノード Words.. で囲まれています。

<WordQuestions>
    <Question>Question1</Question>
    <Answer>Answer1</Answer>
</WordQuestions>

<WordQuestions>
    <Question>Question2</Question>
    <Answer>Answer2</Answer>
</WordQuestions>

XML ファイルから質問と回答の要素をランダムに選択し、それをユーザーに表示する関数を作成する必要がありますが、ユーザーがその後クリックしたときに再度表示することはありません。そのため、質問がユーザーに表示されたら、次のクリックでユーザーに表示される質問のリストから削除する必要があります。誰もこれを行う方法を知っていますか?

チャームのように機能する同様の機能を作成しましたが、ランダムすぎるという制限があります。ユーザーに表示するために質問と回答の要素が選択されないか、不均衡な回数選択される可能性があります。ユーザーはすべての問題を練習する必要があります。これは、この関数の簡略版です。

<script language = "javascript">


  function getCategory()
  {
    var XMLHttpRequestObject = false; 

    if (window.XMLHttpRequest) {
      XMLHttpRequestObject = new XMLHttpRequest();
      XMLHttpRequestObject.overrideMimeType("text/xml");
    } else if (window.ActiveXObject) {
      XMLHttpRequestObject = new 
        ActiveXObject("Microsoft.XMLHTTP");
    }


    if(XMLHttpRequestObject) {

    var P = document.LoadCategory.Load.value;
    if (P == "Category1") {XMLHttpRequestObject.open("GET", "Catgory1.xml", true)}
    if (P == "Category2") {XMLHttpRequestObject.open("GET", "Category2.xml", true)} 
    if (P == "Category3") {XMLHttpRequestObject.open("GET", "Category3.xml", true)}


      XMLHttpRequestObject.onreadystatechange = function() 
      { 
        if (XMLHttpRequestObject.readyState == 4 && 
          XMLHttpRequestObject.status == 200) { 
        var xmlDocument = XMLHttpRequestObject.responseXML;
        displayCategory(xmlDocument);
        } 
      } 

      XMLHttpRequestObject.send(null); 
    }
  }

  function displayCategory (xmldoc)
  {

    Questionnodes = xmldoc.getElementsByTagName("Question");
    Answernodes = xmldoc.getElementsByTagName("Answer");
    var i = Math.floor((Math.random()*1000)%Questionnodes.length);
    var i = Math.floor((Math.random()*1000)%Answernodes.length);        

    var displayText1 =
      Questionnodes[i].firstChild.nodeValue;

    var target = document.getElementById("targetDiv1");
    target.innerHTML=displayText1;        


    var displayText2 =
      Answernodes[i].firstChild.nodeValue;

    var target = document.getElementById("targetDiv2");
    target.innerHTML=displayText2;

  }

</script>

現時点では、このコードを変更して必要な機能を取得できるかどうかはわかりません。XML ファイルを解析して JavaScript 配列にしようとしましたが (要素をランダムに選択して削除しました)、どこにもアクセスできませんでした。誰かにいくつかの提案があれば、私はとても感謝しています. 繰り返しになりますが、XML ファイルから質問と回答の要素をランダムに選択できる関数が必要ですが、ユーザーには 1 回しか表示されません。乾杯。（すみません、これはとても長々としたものでした）。

4

2 に答える 2

0

ここにあなたがしようとしていることを私がどのように行うかの例へのリンクがあります：http：//jsfiddle.net/dievardump/xL5mg/4/

コードの一部にコメントを付けて、getCategoryメソッドを「シミュレート」しました。

注：私のコードから、何とかできなかったのは「pickRandom」メソッドだと思います。私はあなたが他の部分をするために必要なほとんどすべてを持っていると思います。

私のコードで何をするか：

  • 質問と回答のコレクションがあります
  • QuestionAndAnswerコンストラクターがあります

サーバーの結果が表示されたら、xmlファイルを「解析」し、コレクションにQuestionAndAnswerオブジェクトを入力します。

HTMLには、「質問を読み込む」ボタンがあります。それをクリックすると、displayQuestionメソッドが呼び出されます。

このメソッドは、コレクションからランダムなQandAオブジェクトを選択（取得および削除）し、質問とボタンを表示して、関連する回答を表示します。

コメントで言ったように、次々と質問を追加することにしましたが、質問と応答のハンドラーを1つだけにして、その内容を変更することで変更できます。

ある日jsfiddleが機能しなくなった場合のコードは次のとおりです。

Javascript 

(function() {   
// Question and Answer collection
var oQandACollection = {
    collection : [],
    length : 0,

    // get a QandA object
    get : function(i) {
        if (i < this.length) {
            return this.collection[i];
        }      
        return null;
    },

    // add a QandA object
    add : function(qanda) {
         this.collection.push(qanda);
         this.length++;
    },

    // remove a QandA object
    remove : function(i) {
        if (typeof this.collection[i] !== 'undefined') {
            this.collection.splice(i, 1);
            this.length--;
        }
    },

    // randomly pick an object from the collection
    pickRandom : function() {
        if (this.length === 0) return null; // return null if there is no object in the collection
        var i = Math.floor(Math.random() * this.length);
        var qanda = this.get(i);
        this.remove(i);
        return qanda;
    }

};

// Question and Answer Object
var QandA = function(xmlNode) {

    var question = xmlNode.getElementsByTagName('Question')[0] || null;
    var answer = xmlNode.getElementsByTagName('Answer')[0] || null;
    if (question && answer) {
        this.question = question.textContent;
        this.answer = answer.textContent;
    } else {
        return null;   
    }  
};

// function to use as ajax request handler
function fillQandA(xmlDoc) {
    // get all WordQuestions elements
    var wrappers = xmlDoc.getElementsByTagName('WordQuestions');
    for(var i = 0, l = wrappers.length, qanda = null; i < l; i++) {
        // create a new question from the current wrapper
        // we could have perfom the getElementsByTagName('Question') here
        // but since the code is really specific to your example i putted it in the constructor of QandA
        // You can change it
        qanda = new QandA(wrappers[i]);
        if (qanda) {
            oQandACollection.add(qanda);  
        }
    }
};


var eList = document.getElementById('qa-list'),
    eLoadQuestion = document.getElementById('load-qanda');

// functions to display a question
// i choosed to add question the one after the others,
// so i re-create html elements at every display
// but you also can modify it to have just one question at a time
// matter of choice
function displayQuestion() {
    var qanda = oQandACollection.pickRandom(); // get a question

    if (qanda) { // if there is a question

        // create elements
        var eQuestion = document.createElement('p'),
            eAnswer = document.createElement('p'),
            eBtn = document.createElement('button');

        eQuestion.textContent = qanda.question;
        eAnswer.textContent = qanda.answer;

        eQuestion.classNAme += ' question';
        eAnswer.className += ' answer';
        eBtn.textContent = 'Show Answer';


        // add click event listener to the button to show the answer
        eBtn.addEventListener('click', function() {
            eAnswer.style.display = 'block';
            eList.removeChild(eBtn);
        }, false);

        eList.appendChild(eQuestion);
        eList.appendChild(eAnswer);
        eList.appendChild(eBtn);
    }
};

// add click event handler on display
eLoadQuestion.addEventListener('click', displayQuestion, false);



// simulate xhr request
function getCategory() {
    // fill fake Q&A xml document
    var xmlDoc = document.createElement('root');
    for(var i = 0, wrapper = null, question = null, answer = null; i < 10; i++) {
        wrapper = document.createElement('WordQuestions');                   
        question = document.createElement('Question');
        question.textContent = 'Question ' + (i+1);                  
        answer = document.createElement('Answer');
        answer.textContent = 'Answer ' + (i+1);

        wrapper.appendChild(question);
        wrapper.appendChild(answer);

        xmlDoc.appendChild(wrapper);

    }   

    // us as xhr request handler like : fillQandA(XMLHttpRequestObject.responseXML);
    fillQandA(xmlDoc);        
}

getCategory();

// test function
function test() {
    for(var i = oQandACollection.length; i--; ) {
        displayQuestion();
    }
}

//test();
})();

HTML

<div class="wrapper">
<div id="qa-list">
</div>
<button id="load-qanda" value="Load new question">Load new question</button>

</div>

CSS

    .wrapper {
    width : 500px;      
}

.wrapper > div {
    position : relative;
    width : 100%    
}

.answer {
    display : none;    
}
于 2012-05-27T18:17:22.827 に答える
0

var hasbeenshown、hasbeenanswered、useranswer、関数 getquestion、関数 getanswer を使用してクラスを作成します。

インスタンス化されたクラスは、読み込み時に xml ファイルの値で満たされ、配列に追加し、乱数を使用してランダムな質問を選択できます。

于 2012-05-27T16:51:13.443 に答える