文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Javascript进行个性测验

问使用Javascript进行个性测验
EN

Stack Overflow用户

提问于 2015-09-21 15:50:44

回答 2查看 3K关注 0票数 0

我是Javascript的新手，我必须做一个个性测试。我需要的测验只是Javascript，没有jQuery。我需要使每个答案选项可点击，并只显示一个问题在同一时间。以及找到一种方法来存储每个答案以显示结果。我只是不确定从哪里开始，我一直有一点麻烦。这可能看起来很愚蠢，但我真的需要一些帮助来看看我哪里出了错，以及我如何才能修复它。下面是我到目前为止用html，css和javascript做的事情。提前感谢

var startButton = document.getElementById("startButton");
startButton.addEventListener("click", startClick);

function startClick() {

    var intro = document.getElementById("intro");
    intro.style.display = "none";
    startButton.style.display = "none";

    var question1 = document.getElementById("question1");
    question1.style.display = "block";

}

var answerButton = document.getElementsByTagName("li");
answerButton[0].addEventListener("click", answerClick);
console.dir(answerButton);

function answerClick(eventObject) {
    var eventClick = eventObject.target;

var question = document.getElementsByClassName("question");
    
for(i= 0; i < question.length; i ++); {
  question[i].style.display = "block";
    
}
}

@charset"UTF-8";

/* CSS Document */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1.5;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*above is Eric Meyer CSS reset*/
 #titleimage {
    width: 100%;
    padding-top: .5%;
    padding-bottom: .5%;
}
#titleimage img {
    max-width: 100%;
}
.question, #results {
    display: none;
}

p {
    font-family:'Helvetica';
    font-size: 1.7em;
    font-weight: 100;
    text-align:center;
    padding: 1em;
}
h3 {
    font-family:'Helvetica';
    font-size: 1.7em;
    font-weight: 150;
    text-align:center;
}
h2 {
    font-family:'Helvetica';
    font-size: 1.5em;
    font-weight:200;
    text-align:center;
}
.button {
    margin: 0.5em;
    padding: 0.5em;
    text-align:center;
}
.button:hover {
    text-decoration: underline;
}
.question li {
    border: 1px solid;
    margin: 0.5em;
    padding: 0.5em;
    font-family:'Helvetica';
    font-size: 1.5em;
    text-align:center;
    background-color: #ADDEF4;
}
.question li:hover {
    text-decoration: underline;
}
#results img {
    padding-left: 30%;
    padding-right: 30%;
}

<body>
    <div id="titleimage">
        <img src="Parks-and-rec.jpg" alt="Parks and Rec Banner">
    </div>
    <div id="intro">
         <h2>Take the quiz to see which Parks and Rec character is most like you!</h2>

    </div>
    <div id="startButton" class="button">
         <h3>Let's get started!</h3>

    </div>
    <div id="question1" class="question">
        <p>What is your favourite food?</p>
        <ul id="answers1">
            <li>Breakfast Food</li>
            <li>Waffles</li>
            <li>Calzones</li>
            <li>Vegan Superfoods</li>
        </ul>
    </div>
    <div id="question2" class="question">
        <p>What do you enjoy doing in your spare time?</p>
        <ul id="answers2">
            <li>Woodwork in solitary</li>
            <li>Work!</li>
            <li>Make stop motion 'movies'</li>
            <li>Run!</li>
        </ul>
    </div>
    <div id="question3" class="question">
        <p>What would you do on "treat yo'self" day?</p>
        <ul id="answers3">
            <li>Buy a Batman suit and be Batman</li>
            <li>Go to my lakehouse by myself</li>
            <li>Treat myself to waffles and friends</li>
            <li>Run! Or maybe some yoga</li>
        </ul>
    </div>
    <div id="question4" class="question">
        <p>What are you likely to be doing on a Friday night?</p>
        <ul id="answers4">
            <li>Cooking vegan hamburgers</li>
            <li>Being alone, maybe with some Scotch</li>
            <li>Still working or hanging out with my bestie</li>
            <li>Watching Game of Thrones</li>
        </ul>
    </div>
    <div id="question5" class ="question" >
        <p>What do you find funny?</p>
        <ul id="answers5">
            <li>Accounting puns</li>
            <li>The Government</li>
            <li>Myself</li>
            <li>You can laugh at anything!</li>
        </ul>
    </div>
    <div id="results">
        <div id="Leslie" class="result">
            <p>You get Leslie Knope!</p>
            <img src="leslie.jpg" alt="Leslie Knope giving two thumbs up!">
        </div>
        <div id="Ron" class="result">
            <p>You got Ron Swanson!</p>
            <img src="ron.png" alt="Ron Swanson smiling">
        </div>
        <div id="Ben" class="result">
            <p>You got Ben Wyatt!</p>
            <img src="ben.png" alt="Ben Wyatt">
        </div>
        <div id="Chris" class="result">
            <p>You got Chirs Traeger!</p>
            <img src="chris.png" alt="Chris Traeger saying good job">
        </div>
    </div>
</body>
<script type="application/javascript" src="quiz.js"></script>

</html>

javascript

arrays

function

loops

回答 2

Stack Overflow用户

发布于 2015-09-21 16:05:17

我不确定这就是你的问题所在，但这可能会有所帮助。

一种可能的方法是将你的问题和答案放在一个对象中，就像这样

var quizz = [ 
{ 
question: 'what is your favourite foode?',
answers : { 
        'breakfast': 'value that helps you calculate', 
        'calzone': 'value that helps you calculate'
     }
}, 
{ 
question: 'other question?',
answers : { 
           'answer 1': 'value that helps you calculate', 
           'answer 2': 'value that helps you calculate'
    }
}
];

然后也许可以有一个对象来处理你的答案。它将有一些检查问题的函数，并用你的答案的值更新结果。

这应该会起作用，并帮助你弄清楚。

至于获取答案，请确保正确使用html表单元素，获取它们的值并针对您的问题进行测试。您可以简单地通过更改问题包装器来更改"pagE“，或者从带有问题的对象中呈现它(从quizz数组中呈现current+1 )。

请原谅我的格式:P.祝你好运！

票数 0

Stack Overflow用户

发布于 2015-09-21 16:11:28

JavaScript中有一个错误：

for(i= 0; i < question.length; i ++)/**** ; ****/ {
  question[i].style.display = "block";
}

PS。不要试图重复发明轮子，使用AngularJS :)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32689959

复制

相似问题

问使用Javascript进行个性测验
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript进行个性测验EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript进行个性测验
EN