Bonjour tout le monde,
J'ai un problème avec mon app, je voulais intégré un 2ème niveau de question et pour cela j'ai créé un fichier .json avec la dite second série.
Mais je ne parvient pas à apelé ce fichier. Quelqu'un pourrait il m'aiguillé dans la bonne direction s'il vous plaît?
Merci
Mon fichier views/home/index.html.erb:
mon fichier views/home/niveau_deux.json:
Et la premiere partie du quizz est rangé dans un fichier application.js
Merci beaucoup
[/i]
J'ai un problème avec mon app, je voulais intégré un 2ème niveau de question et pour cela j'ai créé un fichier .json avec la dite second série.
Mais je ne parvient pas à apelé ce fichier. Quelqu'un pourrait il m'aiguillé dans la bonne direction s'il vous plaît?
Merci
Mon fichier views/home/index.html.erb:
<!-- Section: Quizz -->
<section id="about" class="home-section text-center bg-gray">
<div class="heading-about">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<div class="global">
<div id = "frame"
role = "content" >
<div class="bar">
</div>
<a id="reload" href="javascript:window.location.reload();">
<i class="fa fa-refresh fa-4x"></i>
</a>
</div>
</div>
</html>
</div>
</div>
</div>
</div>
</section>
<!-- /Section: Quizz -->
<a href="/home/niveau">Lvl:2</a>
mon fichier views/home/niveau_deux.json:
var quiztitle = "Niveau 2";
var quiz = '[
{
"question" : "1: Tout ça c’est de la faute du vieux professeur Barban, qu’a mis de l’huile sur le feu avec ses grandes phrases à la noix. A ton avis qu’est–ce qu’il leur a dit pour les exciter comme çà… ?",
"image" : "http://res.cloudinary.com/dxsgwgbyd/image/upload/v1425477243/1_nudset.gif",
"choices" : [
"Savez-vous que demain Paris remontera toute la Seine et s’étendra jusqu’au Havre !?",
"Semaine prochaine, exposé: le Grand Paris, qu’est-ce que ça va changer ?",
"Le Grand Paris ça n’existe pas !"
],
"correct" : "Semaine prochaine, exposé: le Grand Paris, qu’est-ce que ça va changer ?",
"explanation": "Le grand Paris existe-t-il ? En tout cas il est en train de se faire. Certains y voient la fin des banlieues de Paris.D’autres aimeraient que Paris aille jusqu’au Havre. Tout çà n’est ni faux ni vrai. La réponse la plus sûre c’est… que semaine prochaine y a interro !",
},
{
"question" : "2: Du coup tout le monde s’y met. Selon Ludivine, le Grand Paris c'est la transformation de l’Île-de-France en une seule ville, le Grand Paris. T’en penses quoi ?",
"image" : "http://res.cloudinary.com/hiz1tptyp/image/upload/v1428047351/Q2_otk1lq.jpg",
"choices" : [
"L'Île de France... C'est quoi ?",
"Elle a en partie raison",
"C’est totalement faux !"
],
"correct" : "C’est totalement faux !",
"explanation" : "L’Ile de France c’est une Région. Le Grand Paris ce sera une métropole c’est à dire un regroupement des villes des 3 départements de la petite couronne (92, 93, 94) et de Paris(75).",
},
{
"question" : "3: Mince alors !! Jean a perdu son livret de présentation du Grand Paris. Lui qui voulait impressionner ses potes en annonçant la date de lancement de la métropole du Grand Paris !! D’après toi, laquelle de ces dates est la bonne?",
"image" : "http://res.cloudinary.com/hiz1tptyp/image/upload/v1428047351/Q3_ulsc1u.jpg",
"choices" : [
"1 janvier 2016",
"1 janvier 2017",
"1 janvier 2018"
],
"correct" : "1 janvier 2016",
"explanation" : "La création de la métropole est prévue pour le 1er janvier 2016. C’est une loi très récente, la loi Maptam votée en décembre 2013, qui l’a décidée ",
}
];
var currentquestion = 0,
score = 0,
submt = true,
picked;
$(document).ready(function(){
$("#submitbutton").hide();
function htmlEncode(value) {
return $(document.createElement('div')).text(value).html();
}
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');
}
}
}
function nextQuestion() {
submt = true;
$('#explanation').empty();
$('#question').text(quiz[currentquestion].question);
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();
}
function processQuestion(choice) {
currentquestion++;
$("#submitbutton").hide();
if (currentquestion == quiz.length) {
endQuiz();
} else {
nextQuestion();
}
}
function setupButtons() {
$('.choice').on('mouseover', function () {
$(this).css({
'background-color': '#e1e1e1'
});
});
$('.choice').on('mouseout', function () {
$(this).css({
'background-color': '#fff'
});
})
$('.choice').on('click', function () {
choice = $(this).attr('data-index');
$('.choice').removeAttr('style').off('mouseout mouseover');
$(this).css({
'border-color': '#222',
'font-weight': 700,
'background-color': '#c1c1c1'
});
if (quiz[currentquestion].choices[choice] == quiz[currentquestion].correct) {
$('.choice').eq(choice).css({
'background-color': '#50D943'
});
$('#explanation').html('<strong>VRAI !</strong> ' + htmlEncode(quiz[currentquestion].explanation));
score++;
} else {
$('.choice').eq(choice).css({
'background-color': '#D92623'
});
$('#explanation').html('<strong>FAUX.</strong> ' + htmlEncode(quiz[currentquestion].explanation));
}
$("#submitbutton").show();
if (submt) {
submt = false;
$('.choice').off('click');
$(this).off('click');
$('#submitbutton').css({
'color': '#000'
});
$("#submitbutton").click(function(){
$('.choice').off('click', choice);
$(this).off('click');
processQuestion(choice);
});
}
})
}
function endQuiz() {
$('#explanation').empty();
$('#question').empty();
$('#choice-block').empty();
$('#submitbutton').remove();
$('#question').text("Vous avez " + score + " réponse(s) correcte(s) sur " + quiz.length);
$(document.createElement('h2')).css({
'text-align': 'center',
'font-size': '4em'
}).text(Math.round(score / quiz.length * 100) + '%').insertAfter('#question');
var result = Math.round(score / quiz.length * 100);
var g = document.createElement('text');
g.id = 'text';
$(g).css({
'height':'100px',
'width': '100px',
'text-align': 'center',
}).insertAfter('#explanation');
if(result < 33){
$("#explanation").text("Décevant Tu as obtenu le niveau CANCRE: Un conseil: le jour de l'exposé, reste couché et invente un truc, que t'était à Tombouctou avec des tchétchènes aux trousses, que t'étudiais la métropole en Amazonie sur une pirogue en plastique du Burundi, en tout cas rencarde toi ou bouge de région ou tu vas pas comprendre ce qu'il va t'arriver !");
}
else if(result < 67){
$("#explanation").text("Peut mieux faire. Tu as obtenu le niveau FAIBLARD: T'as intérêt de réviser un peu sinon ça va charcller, tu vas te prendre un gros vent! Lis bien toutes les fiches pédagogiques et ça devrait aller. Le Grand Paris c'est pas vraiment ta tasse de thé on dirait !!");
}
else if(result < 90){
$("#explanation").text("Bravo !! Tu as obtenu le niveau TOP: Franchement c'est déjà assez balaise comme score! T'es déjà un vrai grand parisien (on blague, c'est pas uune insulte)! Les doigts dans le nez tu vas le passer l'exposé! Attention aux questions pièges du professeur Barban!");
}
else if(result == 100){
$("#explanation").text("Félicitation !!! Tu as obtenu le niveau CRAQUE: C'est bon tu peux faire le malin devant les copains, le Grand Paris n'a pas de secret pour toi tu risques même d'impressionner le professeur Barban! Mais où est-ce que t'as appris tout ça? Sur metropop.org?");
}
}
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 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('Suivant').css({
'font-weight': 700,
'color': '#222',
'padding': '20px 0',
'line-height': '5%',
}).appendTo('#frame');
$("#submitbutton").hide();
setupButtons();
}
}
init();
});
}'
Et la premiere partie du quizz est rangé dans un fichier application.js
Merci beaucoup
[/i]