Question

我对Javascript很新，我必须进行个性测验。我需要测验只是Javascript，没有jQuery。我需要使每个答案选项都可以点击，并且一次只显示一个问题。以及找到存储每个答案以显示结果的方法。我不知道从哪里开始，我一直有点麻烦。这可能看起来很愚蠢，但我真的很喜欢看到我出错的地方以及如何解决它。以下是我到目前为止使用html，css和javascript所做的工作。提前致谢

＆＃13;

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";
    
}
}

＆＃13;

@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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

可能的路线是将您的问题和答案放在一个对象中，有点像

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表单元素，获取其值并针对您的问题进行测试。你可以改变＆＃34; pagE＆＃34;只需更改问题包装器，或从问题对象渲染它（从quizz数组中渲染当前+ 1）。

原谅格式：P。祝你好运！

Answer 2

JavaScript中存在错误：

preg_match_all('@<Cell>(.*?)</Cell>@', $xml, $cells);
$cells = $cells[1];

function appendLists(&$v) {
    global $ol, $ol2, $ul, $ul2, $olc, $ol2c, $ulc, $ul2c;
    if (count($ol) > 0 || count($ol2) > 0 || count($ul) > 0 || count($ul2) > 0) {
        while (preg_match('@~!ol1-(\d+)-here!~@u', $v, $m)) {
            $v = str_replace($m[0], '<ol><li>' . join('</li><li>', $ol[$m[1]]) . '</li></ol>', $v);
        }
        while (preg_match('@~!ul1-(\d+)-here!~@u', $v, $m)) {
            $v = str_replace($m[0], '<ul><li>' . join('</li><li>', $ul[$m[1]]) . '</li></ul>', $v);
        }
        while (preg_match('@~!ol2-(\d+)-here!~@u', $v, $m)) {
            $v = str_replace($m[0], '<ol><li>' . join('</li><li>', $ol2[$m[1]]) . '</li></ol>', $v);
        }
        while (preg_match('@~!ul2-(\d+)-here!~@u', $v, $m)) {
            $v = str_replace($m[0], '<ul><li>' . join('</li><li>', $ul2[$m[1]]) . '</li></ul>', $v);
        }

        $ol = array(); $ol2 = array(); $ul = array(); $ul2 = array();
        $olc = -1; $ol2c = -1; $ulc = -1; $ul2c = -1;
    }
}

foreach ($cells as $cell) {
    $output = '';
    if ($cell != '') {
        // split to elements
        preg_match_all('@<(.*?)>(.*?)</\1>@u', $cell, $elements);

        $ol = array(); $ol2 = array(); $ul = array(); $ul2 = array();
        $olc = -1; $ol2c = -1; $ulc = -1; $ul2c = -1;
        for ($i = 0; $i < count($elements[0]); $i++) {
            $this_element = $elements[1][$i];
            $this_value = $elements[2][$i];
            $next_element = (isset($elements[1][$i+1]) ? $elements[1][$i+1] : false);

            switch ($this_element) {
                case 'paragraph':
                    $output .= '<p>' . $this_value . '</p>';
                    if ($next_element === 'ord_list1') { $olc++; $ol[$olc] = array(); $output .= "~!ol1-$olc-here!~"; }
                    elseif ($next_element === 'list1') { $ulc++; $ul[$ulc] = array(); $output .= "~!ul1-$ulc-here!~"; }
                    elseif ($next_element === 'ord_list2') { $ol2c++; $ol2[$ol2c] = array(); $output .= "~!ol2-$ol2c-here!~"; }
                    elseif ($next_element === 'list2') { $ul2c++; $ul2[$ul2c] = array(); $output .= "~!ul2-$ul2c-here!~"; }
                    break;

                case 'ord_list1':
                    if ($output == '') { $olc++; $ol[$olc] = array(); $output .= "~!ol1-$olc-here!~"; }
                    if ($next_element === 'ord_list2') { $ol2c++; $ol2[$ol2c] = array(); $this_value .= "~!ol2-$ol2c-here!~"; }
                    elseif ($next_element === 'list2') { $ul2c++; $ul2[$ul2c] = array(); $this_value .= "~!ul2-$ul2c-here!~"; }
                    $ol[$olc][] = $this_value;
                    break;

                case 'ord_list2':
                    if ($output == '') $output .= '~!ol2-here!~';
                    $ol2[$ol2c][] = $this_value;
                    break;

                case 'list1':
                    if ($output == '') { $ulc++; $ul[$ulc] = array(); $output .= "~!ul1-$ulc-here!~"; }
                    if ($next_element === 'ord_list2') { $ol2c++; $ol2[$ol2c] = array(); $this_value .= "~!ol2-$ol2c-here!~"; }
                    elseif ($next_element === 'list2') { $ul2c++; $ul2[$ul2c] = array(); $this_value .= "~!ul2-$ul2c-here!~"; }
                    $ul[$ulc][] = $this_value;
                    break;

                case 'list2':
                    if ($output == '') { $ul2c++; $ul2[$ul2c] = array(); $output .= "~!ul2-$ul2c-here!~"; }
                    $ul2[$ul2c][] = $this_value;
                    break;
            }
        }
        appendLists($output);
    }
}

PS。不要试图重新发明轮子，使用AngularJS：）

使用Javascript

2 个答案: