显示来自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>