I am having some trouble. I am working within Business Catalyst which stores dynamic user-submitted data and allows me to output it in whatever way I need.
I have created a series of Web Apps that work together to allow users to take quizzes. Currently I am receiving an error message 'Uncaught TypeError: Cannot read property 'questionText' of undefined'
How my code is working currently:
- A user submits a form with quiz/survey data.
- They are directed to a new page that runs a search for the most recent quiz/survey submission unique to their user.
- The data is output on the page within a div.
- A function reads the data and builds the page content accordingly to display the correct quiz/survey results.
The data that is submitted is output in the following format. Note that the {tags} are Business Catalysts way of outputting dynamic information - the {tag} is replaced with the user-submitted data on the page. Also note that I have only shown the data for 3 questions, there are up to 15 in total.
var quizSurvey = "{tag_quiz/survey}";
var w = window.innerWidth;
function Question(questionNumber, questionText, answerType, answerA, answerB, answerC, answerD, correctAnswer, userMultichoice, userTF, userSRating, userSSAnswer, qPassFail) {
this.questionNumber = questionNumber;
this.questionText = questionText;
this.answerType = answerType;
this.answerA = answerA;
this.answerB = answerB;
this.answerC = answerC;
this.answerD = answerD;
this.correctAnswer = correctAnswer;
this.userMultichoice = userMultichoice;
this.userTF = userTF;
this.userSRating = userSRating;
this.userSSAnswer = userSSAnswer;
this.qPassFail = qPassFail;
};
var question = new Array();
question[1] = new Question("1", "{tag_q1-question}", "{tag_q1-answer-type}", "{tag_q1-multichoice-a}", "{tag_q1-multichoice-b}", "{tag_q1-multichoice-c}", "{tag_q1-multichoice-d}", "{tag_q1-correct-answer}", "{tag_q-multichoice-1}", "{tag_q-t/f-1}", "{tag_s-ratings-1}", "{tag_s-shortanswer-1}", "{tag_q1-pass/fail}");
question[2] = new Question("2", "{tag_q2-question}", "{tag_q2-answer-type}", "{tag_q2-multichoice-a}", "{tag_q2-multichoice-b}", "{tag_q2-multichoice-c}", "{tag_q2-multichoice-d}", "{tag_q2-correct-answer}", "{tag_q-multichoice-2}", "{tag_q-t/f-2}", "{tag_s-ratings-2}", "{tag_s-shortanswer-2}", "{tag_q2-pass/fail}");
question[3] = new Question("3", "{tag_q3-question}", "{tag_q3-answer-type}", "{tag_q3-multichoice-a}", "{tag_q3-multichoice-b}", "{tag_q3-multichoice-c}", "{tag_q3-multichoice-d}", "{tag_q3-correct-answer}", "{tag_q-multichoice-3}", "{tag_q-t/f-3}", "{tag_s-ratings-3}", "{tag_s-shortanswer-3}", "{tag_q3-pass/fail}");
var userScore = "{tag_total score}";
var passingScore = "{tag_required score to pass}";
var showAnswers = "{tag_show answers}";
So now that you see how the Data is stored, here is the code for the page that it is output on. Note that I left out Step 2, the code that runs the search - I know this works, so I didn't think you would need to see it.
<div class="row">
<div class="small-12 columns">
<div class="quiz-survey-search" id="qs-results" style="display: block;"> {module_webappscustomer,19627,l,,,_self,true,1,true,1} </div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="correct" id="correct" style="display: none;">
<h2 id="quiz-headline-1" style="line-height:110%;margin-bottom:1rem;"></h2>
<h4 style="text-align:center;margin:1.5rem 3rem;color:black!important;">Good work completing this chapter!<br />
Your score is:</h4>
<div class="large-score" id="score-1"></div>
</div>
<div class="incorrect" id="incorrect" style="display: none;">
<h2 id="quiz-headline-2" style="line-height:110%;margin-bottom:1rem;"></h2>
<h4 style="text-align:center;margin:1.5rem 3rem;color:black!important;">You did not achieve the required passing score. Please review the materials and take the quiz again to complete this chapter.</h4>
<div class="large-score" id="score-2" style="margin:3rem 0rem;"></div>
</div>
<div class="survey" id="survey" style="display: none;">
<h2>Thank you for completing the survey.</h2>
<h4>Your answers have been submitted.</h4></div>
</div>
<div id="correct-answers" style="display: none;">
<h3 style="text-decoration: underline;">Correct Answers</h3>
<p style="font-weight: bold;">Although you passed the quiz you had one or more answers that were incorrect.
Below are the correct answers.</p>
<div class="row">
<div id="incorrectQuestions"></div>
</div>
</div>
</div>
<script>
var quizsurveyDiv = document.getElementById('qs-results').innerHTML;
if (quizsurveyDiv == " ") {
var element = '{module_url,AllIDs}';
var arrayOfStrings = element.split("-");
document.getElementById('CAT_Custom_206').value = arrayOfStrings[0];
document.getElementById('CAT_Custom_2').value = arrayOfStrings[1];
document.getElementById('CAT_Custom_3').value = arrayOfStrings[2];
catcustomcontentform9225.submit();
} else {
if (quizSurvey == "Quiz") {
var qNumber = 0;
var qNumbers = function() {
for (i = 0; i <= 14; i++) {
if (question[i].questionText !== "") {
qNumber = qNumber + 1;
console.log('here - ' + qNumber);
};
};
};
var writeDivs = function() {
var incorrectQDiv = "";
for (i = 1; i <= qNumber; i++) {
if (question[i].qPassFail == "0") {
incorrectQDiv = document.getElementById('incorrectQuestions').innerHTML;
document.getElementById('incorrectQuestions').innerHTML = incorrectQDiv + "<div class='small-12 medium-6 columns incorrectQ' id='incorrectQ-" + question[i].questionNumber + "'>Hi!!</div>";
console.log('here2 - ' + qNumber);
} else if (question[i].qPassFail == "1") {
};
};
};
var writeQContent = function() {
for (var i = 1; i <= qNumber; i++) {
if (question[i].qPassFail == "0") {
if (question[i].answerType == "True/False") {
var qUserAnswer = question[i].userTF;
} else {
qUserAnswer = question[i].userMultichoice;
};
document.getElementById('incorrectQ-' + question[i].questionNumber).innerHTML = "<p><span class='pinkNum'>" + question[i].questionNumber + "</span>" + question[i].questionText + '</p><div class="row"><div class="small-12 small-push-12 medium-6 columns"><p><span class="pink-title">Your Answer: ' + qUserAnswer + '</span><br/><div id="incorrectA-' + question[i].questionNumber + '"></div></p></div><div class="small-12 small-pull-12 medium-6 columns"><p><span class="pink-title">Correct Answer: ' + question[i].correctAnswer + '</span><div id="correctA-' + question[i].questionNumber + '"></div></p></div></div>';
};
if (question[i].qPassFail == "0" && question[i].answerType == "Multiple Choice") {
var correctADiv = "correctA-" + question[i].questionNumber; console.log(correctADiv);
if (question[i].correctAnswer == "A") {
document.getElementById(correctADiv).innerHTML = question[i].answerA;
} else if (question[i].correctAnswer == "B") {
document.getElementById(correctADiv).innerHTML = question[i].answerB;
} else if (question[i].correctAnswer == "C") {
document.getElementById(correctADiv).innerHTML = question[i].answerC;
} else {
document.getElementById(correctADiv).innerHTML = question[i].answerD;
};
};
};
};
var showTheAnswers = function() {
if (quizPassFail == "1") {
document.getElementById('quiz-headline-1').innerHTML = "You passed the quiz: " + quizName;
document.getElementById('score-1').innerHTML = '<span class="large-score">' + totalScore + '%</span>';
document.getElementById('correct').style.display = "block";
if (showAnswers == "1") {
if (totalScore != "100") {
document.getElementById('correct-answers').style.display = "block";
} else if (showAnswers != "1" || totalScore == "100") {
document.getElementById('correct-answers').style.display = "none";
};
};
} else {
document.getElementById('quiz-headline-2').innerHTML = "Unfortunately you did not pass the quiz: " + quizName ;
document.getElementById('score-2').innerHTML = '<div class="hide-for-small medium-1 large-2 columns"> </div><div class="small-6 medium-5 large-4 columns"><p><span class="large-score" id="userScore"></span><br/>Your Score</p></div><div class="small-6 medium-5 large-4 columns"><p><span class="large-score" id="requiredScore"></span><br />Required Score</p></div><div class="hide-for-small medium-1 large-2 columns"> </div>';
innerScores();
document.getElementById('incorrect').style.display = "block";
};
};
var innerScores = function() {
document.getElementById('userScore').innerHTML = totalScore + "%";
document.getElementById('requiredScore').innerHTML = requiredScore + "%";
console.log('innerScores');
};
if (showAnswers == "1" && totalScore != "100") {
qNumbers();
writeDivs();
writeQContent();
showTheAnswers();
} else if (showAnswers == "0" && totalScore != "100") {
showTheAnswers();
} else {
showTheAnswers();
}
} else if (quizSurvey == "Survey") {
document.getElementById('survey').style.display = "block";
};
courseCompletePass();
};
Thank you for any and all possible help. This has been an extremely difficult coding process and any help would be greatly appreciated!
