0
私は、レベルがたくさんあるphonegapクイズアプリを持って、各レベルは10の質問があります。プレーヤーが10の質問に答えると、レベルが完了します。 （彼はレベルを完了するために5つの質問に正しく答える必要があります。そうでなければレベルに失敗し、レベルはまだ完了していません）javascriptまたはjqueryを使ってレベルバッジを追加することはできますか？
今、私はレベルのプレーヤー完了しましたか？バッジ、または「完了しました」というテキストだけで問題ありません。私はチャプターのインデックスページにこれを表示します。
/* questions and choices */
var quiztitle = " chapter 1";
var quiz = [{
"question": " \t 1. question \t ",
"image": "",
"choices": [
" \t a. choice \t ",
" \t b. choice \t ",
" \t c. choice \t ",
" \t d. choice \t "
],
"correct": " \t b. choice \t ",
"explanation": " \t answer explaination \t ",
},
{
"question": " \t 2. question \t ",
"image": "",
"choices": [
" \t a. choice \t ",
" \t b. choice \t ",
" \t c. choice \t ",
" \t d. choice \t "
],
"correct": " \t b. choice \t ",
"explanation": " \t answer explaination \t ",
},
{
"question": " \t 3. question \t ",
"image": "",
"choices": [
" \t a. choice \t ",
" \t b. choice \t ",
" \t c. choice \t ",
" \t d. choice \t "
],
"correct": " \t b. choice \t ",
"explanation": " \t answer explaination \t ",
},
{
"question": " \t 4. question \t ",
"image": "",
"choices": [
" \t a. choice \t ",
" \t b. choice \t ",
" \t c. choice \t ",
" \t d. choice \t "
],
"correct": " \t b. choice \t ",
"explanation": " \t answer explaination \t ",
},
{
"question": " \t 5. question \t ",
"image": "",
"choices": [
" \t a. choice \t ",
" \t b. choice \t ",
" \t c. choice \t ",
" \t d. choice \t "
],
"correct": " \t b. choice \t ",
"explanation": " \t answer explaination \t ",
},
{
"question": " \t 6. question \t ",
"image": "",
"choices": [
" \t a. choice \t ",
" \t b. choice \t ",
" \t c. choice \t ",
" \t d. choice \t "
],
"correct": " \t b. choice \t ",
"explanation": " \t answer explaination \t ",
},
{
"question": " \t 7. question \t ",
"image": "",
"choices": [
" \t a. choice \t ",
" \t b. choice \t ",
" \t c. choice \t ",
" \t d. choice \t "
],
"correct": " \t b. choice \t ",
"explanation": " \t answer explaination \t ",
},
{
"question": " \t 8. question \t ",
"image": "",
"choices": [
" \t a. choice \t ",
" \t b. choice \t ",
" \t c. choice \t ",
" \t d. choice \t "
],
"correct": " \t b. choice \t ",
"explanation": " \t answer explaination \t ",
},
{
"question": " \t 9. question \t ",
"image": "",
"choices": [
" \t a. choice \t ",
" \t b. choice \t ",
" \t c. choice \t ",
" \t d. choice \t "
],
"correct": " \t b. choice \t ",
"explanation": " \t answer explaination \t ",
},
{
"question": " \t 10. question \t ",
"image": "",
"choices": [
" \t a. choice \t ",
" \t b. choice \t ",
" \t c. choice \t ",
" \t d. choice \t "
],
"correct": " \t b. choice \t ",
"explanation": " \t answer explaination \t ",
},
]
/* score calcuations script */
var currentquestion = 0,
score = 0,
submt = true,
picked;
jQuery(document).ready(function($) {
/**
* HTML Encoding function for alt tags and attributes to prevent messy
* data appearing inside tag attributes.
*/
function htmlEncode(value) {
return $(document.createElement('div')).text(value).html();
}
/**
* This will add the individual choices for each question to the ul#choice-block
*
* @param {choices} array The choices from each question
*/
function addChoices(choices) {
if (typeof choices !== "undefined" && $.type(choices) == "array") {
$('#choice-block').empty();
for (var i = 0; i < choices.length; i++) {
$(document.createElement('li')).addClass('choice choice-box').attr('data-index', i).text(choices[i]).appendTo('#choice-block');
}
}
}
/**
* Resets all of the fields to prepare for next question
*/
function nextQuestion() {
submt = true;
$('#explanation').empty();
$('#question').text(quiz[currentquestion]['question']);
$('#pager').text('Question ' + Number(currentquestion + 1) + ' of ' + quiz.length);
if (quiz[currentquestion].hasOwnProperty('image') && quiz[currentquestion]['image'] != "") {
if ($('#question-image').length == 0) {
$(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question'])).insertAfter('#question');
} else {
$('#question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question']));
}
} else {
$('#question-image').remove();
}
addChoices(quiz[currentquestion]['choices']);
setupButtons();
}
/**
* After a selection is submitted, checks if its the right answer
*
* @param {choice} number The li zero-based index of the choice picked
*/
function processQuestion(choice) {
if (quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct']) {
$('.choice').eq(choice).css({
'background-color': '#50D943'
});
$('#explanation').html('<strong>Correct!</strong> ' + htmlEncode(quiz[currentquestion]['explanation']));
score++;
} else {
$('.choice').eq(choice).css({
'background-color': '#D92623'
});
$('#explanation').html('<strong>Incorrect.</strong> ' + htmlEncode(quiz[currentquestion]['explanation']));
}
currentquestion++;
$('#submitbutton').html('NEXT QUESTION »').on('click', function() {
if (currentquestion == quiz.length) {
endQuiz();
} else {
$(this).text('Check Answer').css({
'color': '#222'
}).off('click');
nextQuestion();
}
})
}
/**
* Sets up the event listeners for each button.
*/
function setupButtons() {
$('.choice').on('mouseover', function() {
$(this).css({
'background-color': '#e1e1e1'
});
});
$('.choice').on('mouseout', function() {
$(this).css({
'background-color': '#fff'
});
})
$('.choice').on('click', function() {
picked = $(this).attr('data-index');
$('.choice').removeAttr('style').off('mouseout mouseover');
$(this).css({
'border-color': '#222',
'font-weight': 700,
'background-color': '#c1c1c1'
});
if (submt) {
submt = false;
$('#submitbutton').css({
'color': '#000'
}).on('click', function() {
$('.choice').off('click');
$(this).off('click');
processQuestion(picked);
});
}
})
}
/**
* Quiz ends, display a message.
*/
function endQuiz() {
$('#explanation').empty();
$('#question').empty();
$('#choice-block').empty();
$('#submitbutton').remove();
$('#question').text("You got " + score + " out of " + quiz.length + " correct.");
$(document.createElement('h2')).css({
'text-align': 'center',
'font-size': '4em'
}).text(Math.round(score/quiz.length * 100) + '%').insertAfter('#question');
if (score > 2 || score == 2) {
nextlevelshow();
} else {
samelevel();
}
}
function samelevel() {
$('#samelevel').show()
}
function nextlevelshow() {
$('#nextlevel').show()
}
/**
* Runs the first time and creates all of the elements for the quiz
*/
function init() {
//add title
if (typeof quiztitle !== "undefined" && $.type(quiztitle) === "string") {
$(document.createElement('h1')).text(quiztitle).appendTo('#frame');
} else {
$(document.createElement('h1')).text("Quiz").appendTo('#frame');
}
//add pager and questions
if (typeof quiz !== "undefined" && $.type(quiz) === "array") {
//add pager
$(document.createElement('p')).addClass('pager').attr('id', 'pager').text('Question 1 of ' + quiz.length).appendTo('#frame');
//add first question
$(document.createElement('h2')).addClass('question').attr('id', 'question').text(quiz[0]['question']).appendTo('#frame');
//add image if present
if (quiz[0].hasOwnProperty('image') && quiz[0]['image'] != "") {
$(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[0]['image']).attr('alt', htmlEncode(quiz[0]['question'])).appendTo('#frame');
}
$(document.createElement('p')).addClass('explanation').attr('id', 'explanation').html(' ').appendTo('#frame');
//questions holder
$(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame');
//add choices
addChoices(quiz[0]['choices']);
//add submit button
$(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('Check Answer').css({
'font-weight': 700,
'color': '#222',
'padding': '30px 0'
}).appendTo('#frame');
setupButtons();
}
}
init();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-tabs__panel is-active" id="chat-panel">
<div class="contact swipeable">
<p> Book name </p>
<span class="title light-text"> Please select a Chapter to play </span>
</div>
<div class="contact swipeable">
<div class="contact-user bg-red"><span>01</span></div>
<a class="mdl-navigation__link animsition-link" href="jn1.html">
<p> Chapter </p>
</a>
</div>
<div class="contact swipeable">
<div class="contact-user bg-red"><span>02</span></div>
<a class="mdl-navigation__link animsition-link" href="jn2.html">
<p> Chapter </p>
</a>
</div>
<div class="contact swipeable">
<div class="contact-user bg-red"><span>03</span></div>
<a class="mdl-navigation__link animsition-link" href="jn3.html">
<p> Chapter </p>
</a>
</div>
<div class="contact swipeable">
<div class="contact-user bg-red"><span>04</span></div>
<a class="mdl-navigation__link animsition-link" href="jn4.html">
<p> Chapter </p>
</a>
</div>
<div class="contact swipeable">
<div class="contact-user bg-red"><span>05</span></div>
<a class="mdl-navigation__link animsition-link" href="jn5.html">
<p> Chapter </p>
</a>
</div>
<div class="contact swipeable">
<div class="contact-user bg-red"><span>06</span></div>
<a class="mdl-navigation__link animsition-link" href="jn6.html">
<p> Chapter </p>
</a>
</div>
<div class="contact swipeable">
<div class="contact-user bg-red"><span>07</span></div>
<a class="mdl-navigation__link animsition-link" href="jn7.html">
<p> Chapter </p>
</a>
</div>
</div>私は上記のHTMLコードを実行すると、このインデックスページが表示されます、私はに新たなんだ完了したばかりのレベル
ため、各章の後にバッジを必要としますプログラミングとスタックオーバーフロー。コードを正しく投稿できなかったので、コードスニペット（申し訳ありません）を使用しました。
ご協力いただければ幸いです。ありがとうございます。
あなたの質問を完全に理解することはできませんでしたが、単純にレベルhtmlをCOMPLETEDに変更したい場合は、jQueryの 'html（）'関数を使用できます。バッジを追加したい場合は、 'append（）'や 'after（）'関数を使うことができます。より詳細な回答は、完成したバッジがどこにあるか正確に説明してください。 –
ようこそ、ようこそ[最小、完全、および検証可能な例を作成する方法]（https://stackoverflow.com/help/mcve） – DelightedD0D
コメントのための@RajanBenipuriありがとうございます。私は画像サンプルを編集して追加しました。今はっきりしていて欲しい。 –