jqueryでクイズを作成

質問

jqueryでクイズを作っているのですが、下のプログラムのような問題を書く部分(問題1、問題2...)のところに改行などを用いた長い文章を書きたいのですがどのようにしたらよいでしょうか？

// answers の先頭が正答になるようにして下さい。選択肢はシャッフルして表示されます。
var questions = [
{'question': '問題1', 'answers': ['富士山', '愛鷹山', '天保山', '八ヶ岳']},
{'question': '問題2', 'answers': ['バラ', 'チューリップ', 'タンポポ', '百合']},
{'question': '問題3', 'answers': ['あららぎ', 'せんじょうがはら', 'せんごく', 'かんばる']},
{'question': '問題4', 'answers': ['宇宙人', '異世界人', 'ドイツ人', '未来人']}
];
Array.prototype.shuffle = function() {
var i = this.length;
while(i){
var j = Math.floor(Math.random()*i);
var t = this[--i];
this[i] = this[j];
this[j] = t;
}
return this;
};

var answers = [];
var current_question_number;

$.each(questions, function (i, question) {
question.true_answer = question.answers[0];
question.answers.shuffle();
});

$(function() {
showQuestion(0);

$('#answer_button').click(function () {
var answer = -1;
$.each($('#answers input'), function (i, value) {
if ($(value).is(':checked')) {
answer = i;
return false;
}
});

if (answer == -1) {
$('#warning').slideDown();
return false;
}

$('#warning').slideUp();

answers[current_question_number] = questions[current_question_number].answers[answer];

if (current_question_number < questions.length - 1) {
showQuestion(current_question_number + 1);
} else {
showResult();
}
});
});

function showQuestion(question_number) {
current_question_number = question_number;

var question = questions[question_number];

$('#question_number').text((question_number + 1) + "/" + questions.length);
$('#question_body').text(question.question);
$('#answers').empty();
$.each(question.answers, function (i, value) {
$('#answers').append($('<li/>').append($('<input type="radio" name="answer" id="answer' + i + '"/>')).append($('<label for="answer' + i + '"/>').text(value)));
});
}

function showResult() {
$('#question_view').hide();

$.each(questions, function (i, question) {
var is_true = answers[i] === question.true_answer;
$('#results').append($('<tr/>')
.addClass(is_true ? 'true' : 'false')
.append($('<th/>').text(i + 1))
.append($('<td/>').text(answers[i]))
.append($('<td/>').text(question.true_answer))
.append($('<td/>').text(is_true ? '○' : '×'))
);
});

$('#result_view').show();
}

回答No.3

Taiyonoshizuku

いや、どこに書くかはどこに表示したいか次第なんだけど。
質問にある$('<td/>').text()を$('<td/>').html()にすれば？ってこと。

回答No.2

Taiyonoshizuku

$().text(***)ではなくって$().html(***)でタグが生きるよ。

補足

ご回答有難うございます。お礼が遅くなってしまい申し訳ございませんでした。勉強不足のためどのように書き換えたらいいのかわからないのですが、【var questions = [ 】のあとに【$().html(***) 】を付け加えればいいのでしょうか？詳しく教えていただければありがたいです。

回答No.1

sanzero

何に困っているのでしょう？

長い文章で構造がわかりに似くなるならまず問題文の配列をつくってそこに保持しておけばいいのではないでしょうか。

var mondai= [
'問題1',
'問題2',
'問題3',
'問題4'
];

var questions = [
{'question': mondai[0], 'answers': ['富士山', '愛鷹山', '天保山', '八ヶ岳']},
{'question': mondai[1], 'answers': ['バラ', 'チューリップ', 'タンポポ', '百合']},
{'question': mondai[2], 'answers': ['あららぎ', 'せんじょうがはら', 'せんごく', 'かんばる']},
{'question': mondai[3], 'answers': ['宇宙人', '異世界人', 'ドイツ人', '未来人']}
];

改行は<br>を使えばいいのではないでしょうか。

補足

ご回答有難うございます。
配列を作って文章を書けば見やすくなりました。しかし、<br>、</br>を書いても文章が改行されないため困っています。