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

Question

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

目前，我正在使用模板工作：

https://codepen.io/snacey/pen/ROVNwM

<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', 'event', 'test', 'completed', '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', 'event', 'test', 'completed', '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 ，并从question-box删除display:none - 是/否按钮显示但第一个问题没有，有没有办法在页面加载时触发 next() ？

如果可以解决也谢谢。

Answer 1

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

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

要刷新测验...这可能会有所帮助： 仅对特定 html 元素启用刷新