2017-02-23 2 views
2

나는 한 페이지에 질문과 선택 목록을 생성해야하는 작동하는 자바 스크립트 기능이 있지만 실행되지 않으며 크롬 콘솔에서 실행되는 오류가 없다고 생각합니다.javacript가 배열에서 생성되지 않음

- 함수 두 개가있는 함수 createQestions & createChoices - 나중에 몇 가지 추가 변수가 있습니다.하지만 지금은 질문과 답변 만 표시하고 싶습니다. 일부 함수 호출을 누락 올바른 변수를 호출하지 않는 것처럼

//end screen counters 
 
var incorrectCounter = 0; 
 
var correctCounter = 0; 
 
var notAnsweredCounter = 0; 
 
var quiz = $('#quiz'); 
 
var index = 0; 
 

 
//empty array to push each selected answer to 
 
var userGuess = []; 
 
var answerKey = ["html", "css", "jquery", "none of the above"]; 
 

 

 

 
//function that runs the questions and possible choices at start up 
 
$(window).ready(function startUp() { 
 

 
    //all questions and choices are in a large array 
 
    var questionArray = [{ 
 
    questions: "what did we learn in week 1?", 
 
    //smaller array within the large array for each possible answer for each question 
 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
 
    }, { 
 
    questions: "what did we learn in week 2?", 
 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
 
    }, { 
 
    questions: "what did we learn in week 4?", 
 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
 
    }, { 
 
    questions: "what did we learn in week 5?", 
 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
 
    }]; 
 

 
    function createQuestions(index) { 
 
    var trivia = $('<div>', { 
 
     id: 'question' 
 
    }); 
 

 
    var header = $('<h2>Question ' + (index + 1) + ':</h2>'); 
 
    trivia.append(header); 
 

 
    var question = $('<p>').append(questions[index].question); 
 
    trivia.append(question); 
 

 
    var radioButtons = createChoices(index); 
 
    trivia.append(radioButtons); 
 

 
    return trivia; 
 
    index++; 
 

 
    } 
 

 
    function createChoices(index) { 
 
    var radioList = $("<ul>"); 
 
    var item; 
 
    var input = ""; 
 
    for (i = 0; i < questionArray[index].choices.length; i++) { 
 
     item = $('<li>'); 
 
     input = '<input type="radio" name="answer" value=' + i + ' />'; 
 
     input += question[index].choices[i]; 
 
     item.append(input); 
 
     radioList.append(item); 
 
    } 
 
    return radioList; 
 
    index++; 
 
    } 
 

 
    //End of the start up function 
 
});
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Trivia Game: Easy Ver.</title> 
 
    <link href="assets/images"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"> 
 
    <!--Here is the jquery code --> 
 
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> 
 
</head> 
 

 
<body> 
 

 
    <!--Start of main container --> 
 
    <div id="maincontainer" class="container"> 
 
    <h1>Basic Trivia Game</h1> 
 

 
    <div> 
 
     Time Remaining: 
 
     <p id="timerDiv">00:00 Test</p> 
 
    </div> 
 

 
    <div class="container weekDiv"> 
 

 
     <p id="quiz">still a test?</p> 
 
    </div> 
 

 
    <div> 
 
     <button id="submit">Submit Answers test</button> 
 
    </div> 
 
    <br /> 
 

 
    <!--End of main container --> 
 
    </div> 
 

 
    <!--Test for adding a footer via javascript --> 
 
    <div id="footer"> 
 
    HTML test, will be replaced (footer) 
 
    </div> 
 

 

 
    <script src="assets/javascript/app.js" type="text/javascript"></script> 
 
</body> 
 

 
</html>

+0

당신이 손으로 생성하는 대신 템플릿 라이브러리를 사용할 수 있습니다

이 시도? 예를 들어 콧수염. – giubueno

+0

교수님은 우리가 그럴 수 없다고 결코 말하지는 않았지만 그것이 과제의 목적이라고는 생각하지 않습니다. –

+0

이 질문을 하나씩 만들어 낼 수 있습니까? –

답변

0

보인다.

//end screen counters 
var incorrectCounter = 0; 
var correctCounter = 0; 
var notAnsweredCounter = 0; 
var quiz = $('#quiz'); 
var index = 0; 

//empty array to push each selected answer to 
var userGuess = []; 
var answerKey = ["html", "css", "jquery", "none of the above"]; 


//function that runs the questions and possible choices at start up 
$(window).ready(function startUp() { 

    //all questions and choices are in a large array 
    var questionArray = [{ 
    questions: "what did we learn in week 1?", 
    //smaller array within the large array for each possible answer for each question 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
    }, { 
    questions: "what did we learn in week 2?", 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
    }, { 
    questions: "what did we learn in week 4?", 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
    }, { 
    questions: "what did we learn in week 5?", 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
    }]; 

    function createQuestions() { 
    var trivia = $('<div>', { 
     id: 'question' 
    }); 

    var header = $('<h2>Question ' + (index + 1) + ':</h2>'); 
    trivia.append(header); 

    var question = $('<p>').text(questionArray[index].questions); 
    trivia.append(question); 

    var radioButtons = createChoices(index); 
    trivia.append(radioButtons); 

    quiz.append(trivia); 
    } 

    function createChoices(index) { 
    var radioList = $("<ul>"); 
    var item; 
    var input = ""; 
    for (i = 0; i < questionArray[index].choices.length; i++) { 
     item = $('<li>'); 
     input = '<input type="radio" name="answer" value=' + i + ' />'; 
     input += questionArray[index].choices[i]; 
     item.append(input); 
     radioList.append(item); 
    } 
    return radioList; 
    } 

    createQuestions(); 

    //End of the start up function 
});