顯示來自XML文件的隨機問題和答案

Question

我正在嘗試構建一個單頁HTML應用程序，以按隨機順序顯示問題和答案。

這是所需的功能：

1. 顯示了來自XML文件的隨機問題。
2. 用戶單擊頁面上的按鈕，問題將被XML文件中的相關答案替換。
3. 用戶單擊（最好是相同的）按鈕，然后重復步驟1-2。 但是，我希望新問題只是偽隨機問題：在顯示XML文件中的所有其他問題之前，用戶不應在一個會話期間再次看到相同的問題。

因為我正在嘗試實現類似用戶體驗的移動應用程序，所以我不希望在初始頁面加載后發生任何頁面重新加載，但是當用戶點擊按鈕時，應立即顯示“問答”。

我是否可以僅使用JavaScript / jQuery來完成此操作？ 如果需要，我也可以使用PHP，但是純JS實現會更有趣。

如果有人能給我一些解決方法的建議，我將不勝感激。

Answer 1

假設您的按鈕具有“按鈕”類，則在具有“問題”類的div上顯示問題，並將xml保存在變量中，假設是問題，以下jQuery代碼應該可以解決問題

var q;
$( '.button' ).click( function(){
    if( q == false ){
        q = $( questions ).sort( function(){
            return Math.random() > 0.5
        } ).first();
        $( '.question' ).text( q.children( 'question' ).text() );
    }
    else{
        $( '.question' ).text( q.children( 'answer' ).text() );
        $( questions ).first().remove();
        q = false;
    }
} );

我假設您的xml如下所示：

<entry>
    <question>Here lies a question.</question>
    <answer>And here is the answer!</answer>
</entry>
<entry>
    <question>Here lies another question.</question>
    <answer>And here is the answer!</answer>
</entry>