如何在不刷新网页的情况下刷新测验

问题描述

我正在创建一个简单的决策树，在其中跟踪用户的响应，然后在他们回答所有问题后做出相应的反应。

当前，我正在使用模板：

<div class="container text-center content">
    
    <div class="page-header">
        <h1 class="title">What Team Should I talk to -- Decision Maker<!--<small><sup>*</sup></small>--></h1>
        <h3>Should I talk to that team? Find out with this powerful test!</h3>
    </div>

    <div id="start-Box" onLoad="start();">
        <p class="lead">Answer the simple questions to find the truth!</p>
        <button class="btn btn-primary btn-lg" onclick="start()" id="start-button">
            <span class="glyphicon glyphicon-play"></span> START
        </button>
    </div>
    
    <div id="question-Box">
        <p id="step" class="lead"></p><p id="question" class="lead"></p>

        <div id="buttons-Box">
            <button onclick="answer('yes')" class="btn btn-success btn-lg">
                <span class="glyphicon glyphicon-ok"></span> Yes
            </button>
            <button onclick="answer('no')" class="btn btn-danger btn-lg">
                <span class="glyphicon glyphicon-remove"></span> NO
            </button>
        </div>
        <div class="alert alert-danger" role="alert" id="drop-msg">
            <h3><span class="glyphicon glyphicon-thumbs-down"></span> Drop it!</h3>
        </div>
        <div class="alert alert-success" role="alert" id="ask-msg">
            <span class="glyphicon glyphicon-thumbs-up"></span> Oh,that's strange! You should probably start a startup. 
        </div>
        <div class="alert alert-info" role="alert" id="talk-msg">
            <h2>You should talk to the following team(s)</h2>
            <h3 class="talk-teams" id="talk-teams"></h3>
            <button class="btn btn-success" onClick="history.go(0)" id="refresh-button">
                <span class="glyphicon glyphicon-refresh"></span> RESTART
            </button>
        </div>
    </div>

</div>

<div class="container">
        <div class="row">
            <div class="col-lg-2">
                <small class="disclaimer">
                    This  is an idea of James Will.</br>
                    The powerful algorithm behind the tool is secret and patent pending.
                </small>
            </div>
            <div class="col-lg-2">
                <div class="share-Box">
                
                </div>
            </div>  
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="./js/script.js"></script>

html,body {
    height: 100%;
}

#question-Box {
    display: none;
    padding-bottom: 50px;
}

#start-button {
    margin-top: 10px;
}

#start-Box {
    margin-top: 50px;
    padding-bottom: 50px;
}

.content {
    min-height: 100%;
    height: auto;
    margin-bottom: -200px;
    padding-bottom: 200px;
}

.footer {
    min-height: 160px;
    width: 100%;
    background-color: #f7f7f9;
    padding-top: 10px;
    padding-bottom: 15px;
}

.img-circle {
    width: 80px;
    height: 80px;
}

.alert {
    display: none;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.title {
    font-family: 'Open Sans',sans-serif;
    font-weight: bold;
    font-size: 50px;
    text-shadow: 3px 3px 7px #b2c2d1;
}

.twitter-share-button {
    position: absolute;
    margin-left: 10px;
}

.disclaimer {
    font-size: 70%;
}

#___plusone_0 {
    position: absolute;
    top: 0;
    margin-left: 90px !important;
}

#share-button {
    display: none;
    background-color: #3b5998;
    border: none;
}

#share-button:hover {
    background-color: #354c8c;
}

#share-Box{
    padding-left: 15px;
}

下面的JS

var step = 0;
var questions = [];
var result = 0;
var numberqs = 0
var answers = [];
var talk = [];
var teams = [];
questions['ita'] = [
    '',];

questions['eng'] = [
    '','q1','q2','q3','q4',];

answers = [
    '','a1','a2','a3','a4',];

function getLang() {
    var userLang = navigator.language || navigator.userLanguage;
    var lang = userLang.split('-');

    if (lang[0] == 'it')
        return 'ita';
    else
        return 'eng';
}

function answer(res) {
    if (res == 'yes') {
        talk.push(answers[step]);
        next();
        //$('#buttons-Box').hide();
        //$('#drop-msg').show();
        //$('#share-button').show();
       // talk.push(answers[step])

        //ga('send','event','test','completed','no');
    }
    else
        next();
}

function next() {
    numberqs = questions.eng.length - 1
    if (step == numberqs) {
        result = 1;
        
        teams = talk.join('</br>');

        document.getElementById("talk-teams").innerHTML = teams;
        $('#step').hide();
        $('#question').hide();
        $('#buttons-Box').hide();
        $('#talk-msg').show();
        //$('#share-button').show();

        //ga('send','yes');
    }
    else {
        step++;
        
        $('#step').html(step  * numberqs / numberqs);
        $('#question').html(questions[getLang()][step] + '?');
    }
}

/*function nextq() {
    numberqs = questions.eng.length - 1
    if (step == numberqs) {
        result = 1;

        $('#buttons-Box').hide();
        $('#ask-msg').show();
        $('#share-button').show();

        //ga('send','yes');
    }
    else  {
    step++;

        $('#step').html(step  * numberqs / numberqs);
        $('#question').html(questions[getLang()][step] + '?' + answers[step]);
        talk.push(answers[step -1]);
    }
}*/

function start() {
    $('#question-Box').show();
    $('#start-Box').hide();
    next();
}

但是我正在努力以适当的方式进行调整，以获得我想要的结果。

“刷新”按钮刷新整个页面，我希望它可以刷新测验（并以非iframe的方式）。

有人可以指出我正确的方向吗？

谢谢。

另外，有没有一种方法可以在不单击开始按钮的情况下启动该功能，以便立即加载？

我尝试删除start-Box，然后从display:none中删除question-Box-显示是/否按钮，但第一个问题不显示，有没有办法我可以触发下一个（）页面何时加载？

也谢谢您能解决。

解决方法

要在文档加载时启动代码，请执行以下操作：

  document.onload = function() {
    yourFunction();
  }
  // or
  document.onload = yourFunction;

要刷新测验... 这可能会有所帮助： Enabling refreshing for specific html elements only

function function function javascript refresh refresh refresh reload reload