如何以每次加載一次隨機順序獲取帶有Jquery和顯示元素的XML文件？

Question

我一直在嘗試用Ajax構建一個問答軟件。 我需要創建特定功能的幫助。 我創建了具有不同問題和答案的XML文件。 基本思想是使用“獲取”功能來（1）加載XML問題文件，以及（2）使用“顯示”和“ math.random”功能來顯示隨機的“問題”元素（相應的“答案”元素將同時顯示，但被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數組（然后隨機選擇和刪除一個元素），但沒有獲得atm。 如果有人有什么建議，我將不勝感激。 再一次，我想要一個可以從XML文件中隨機選擇問題和答案元素，但僅向用戶顯示一次的函數。 干杯們。 （對不起，這是如此冗長）。

Answer 1

編寫一個具有變種的類，該變種已被顯示，已被回答，用戶回答，函數getquestion，函數getanswer。

實例化的類，在加載時用xml文件中的值填充，您可以將其添加到數組中，並使用隨機數選擇隨機問題。

Answer 2

這是指向我將如何執行您要執行的操作的示例的鏈接： http : //jsfiddle.net/dievardump/xL5mg/4/

我注釋了代碼的某些部分，並“模擬”了您的getCategory方法。

注意：從我的代碼中，我認為沒有成功做的是'pickRandom'方法。 我認為您幾乎需要做其他部分。

我在我的代碼中做什么：

• 我有一個問答集
• 我有一個QuestionAndAnswer構造函數

當服務器結果到來時，我將“解析” xml文件，並用QuestionAndAnswer對象填充集合。

HTML中的是“加載問題”按鈕。 當您單擊它時，它將調用displayQuestion方法。

此方法從集合中選擇一個隨機QandA對象（從中獲取和刪除），然后顯示問題和按鈕以查看關聯的答案。

就像我在評論中說的那樣，我決定一個接一個地添加問題，但是您可以通過只設置一個問題和響應處理程序並修改其內容來更改該問題。

如果有一天jsfiddle決定不再工作，這是以下代碼：

Java腳本

(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;    
}