【问题标题】:Show random questions and answers from XML file显示 XML 文件中的随机问题和答案
【发布时间】:2014-04-10 16:02:16
【问题描述】:

我正在尝试构建一个单页 HTML 应用程序以随机​​顺序显示问题和答案。

这是所需的功能:

  1. 显示来自 XML 文件的随机问题。
  2. 用户单击页面上的按钮,问题将替换为 XML 文件中的相关答案。
  3. 用户单击(最好是相同的)按钮并重复步骤 1-2。但是,我希望新问题只是伪随机的:在 XML 文件中的所有其他问题已经显示之前,用户不应在一个会话期间再次看到相同的问题。

因为我正在尝试实现类似移动应用的用户体验,我不希望在初始页面加载后发生任何页面重新加载,但是当用户点击按钮时应该立即显示问答。

我是否正确,这可以仅使用 JavaScript/jQuery 来完成?如果需要,我也可以使用 PHP,但纯 JS 实现会更有趣。

如果有人能给我一些解决这个问题的方法,我将不胜感激。

【问题讨论】:

  • 好吧,您需要有一个具体的问题,如果您提供零代码,我们无能为力。开始构建您的应用,自行发现,如果遇到问题,请在此处寻求帮助

标签: javascript jquery xml random


【解决方案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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-10-06
    • 1970-01-01
    • 2015-07-23
    • 1970-01-01
    • 1970-01-01
    • 2013-09-30
    • 1970-01-01
    相关资源
    最近更新 更多