Javascript个性测验

Personality Quiz with Javascript

本文关键字：Javascript      更新时间：2023-09-26

我对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="answerswers1">
            <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="answerswers2">
            <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="answerswers3">
            <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="answerswers4">
            <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="answerswers5">
            <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>

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

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

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。祝你好运!

JavaScript有一个bug:

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

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

相关文章：