How to create a form with modal windows? - javascript

I know how to create a form, I know how to create a modal window. My concern is to combine the two.
For the moment I managed to make sure that at the click on the first element of research, a window opens.
However I have to do that on every element of the form. How to associate each search element with its own modal window? Do I have to repeat the javascript code as many times as research items, or is there a cleaner way? thank you so much
$(document).ready(function() {
// Lorsque l'on clique sur show on affiche la fenêtre modale
$('#show').click(function(e) {
//On désactive le comportement du lien
e.preventDefault();
showModal();
});
// Lorsque l'on clique sur le fond on cache la fenetre modale
$('#fond').click(function() {
hideModal();
});
// Lorsque l'on modifie la taille du navigateur la taille du fond change
$(window).resize(function() {
resizeModal()
});
});
function showModal() {
var id = '#modal';
$(id).html('Voici ma fenetre modale<br/>Fermer la fenetre');
// On definit la taille de la fenetre modale
resizeModal();
// Effet de transition
$('#fond').fadeIn(1000);
$('#fond').fadeTo("slow", 0.8);
// Effet de transition
$(id).fadeIn(2000);
$('.popup .close').click(function(e) {
// On désactive le comportement du lien
e.preventDefault();
// On cache la fenetre modale
hideModal();
});
function hideModal() {
// On cache le fond et la fenêtre modale
$('#fond, .popup').hide();
$('.popup').html('');
}
}
function resizeModal() {
var modal = $('#modal');
// On récupère la largeur de l'écran et la hauteur de la page afin de cacher la totalité de l'écran
var winH = $(document).height();
var winW = $(document).width();
// le fond aura la taille de l'écran
$('#fond').css({
'width': winW,
'height': winH
});
// On récupère la hauteur et la largeur de l'écran
var winH = $(window).height();
}
#fond {
position: absolute;
z-index: 9000;
background-color: #0F3C68;
display: none;
}
.popup {
position: fixed;
display: none;
z-index: 9999;
padding: 20px;
background-color: white;
left: 40%;
}
#modal {
width: 760px;
height: 440px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fond"></div>
<div id="modal" class="popup"></div>
Ville(s) de Départ


You can use the code for the same model but will have to pass the data you want to show against every element of the form. I have updated your showModal method which now accepts message as input and shows that message. You can use the same methodology for complex modal as well i.e. pass some parameter as input to the modal and based on that parameters, show the appropriate response to user
$(document).ready(function() {
// Lorsque l'on clique sur show on affiche la fenêtre modale
$('#message1').click(function(e) {
e.preventDefault();
showModal('First Message Clicked');
});
$('#nessage2').click(function(e) {
e.preventDefault();
showModal('Second Message Clicked');
});
// Lorsque l'on clique sur le fond on cache la fenetre modale
$('#fond').click(function() {
hideModal();
});
// Lorsque l'on modifie la taille du navigateur la taille du fond change
$(window).resize(function() {
resizeModal()
});
});
function showModal(message) {
var id = '#modal';
$(id).html('<br>' + message + '<br/>Close');
// On definit la taille de la fenetre modale
resizeModal();
// Effet de transition
$('#fond').fadeIn(1000);
$('#fond').fadeTo("slow", 0.8);
// Effet de transition
$(id).fadeIn(2000);
$('.popup .close').click(function(e) {
// On désactive le comportement du lien
e.preventDefault();
// On cache la fenetre modale
hideModal();
});
function hideModal() {
// On cache le fond et la fenêtre modale
$('#fond, .popup').hide();
$('.popup').html('');
}
}
function resizeModal() {
var modal = $('#modal');
// On récupère la largeur de l'écran et la hauteur de la page afin de cacher la totalité de l'écran
var winH = $(document).height();
var winW = $(document).width();
// le fond aura la taille de l'écran
$('#fond').css({
'width': winW,
'height': winH
});
// On récupère la hauteur et la largeur de l'écran
var winH = $(window).height();
}
#fond {
position: absolute;
z-index: 9000;
background-color: #0F3C68;
display: none;
}
.popup {
position: fixed;
display: none;
z-index: 9999;
padding: 20px;
background-color: white;
left: 40%;
}
#modal {
width: 760px;
height: 440px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fond"></div>
<div id="modal" class="popup"></div>
First Message
<br/>
Second Message

Related

How to make a video from youtube <iframe> disappear while scrolling down html

I want to know how to make a video from youtube disappear while i am scrolling down through the page.
Image 1
Image 2
<!-----------------------------VIDEO E TEXTO------------------------------------->
<br>
<br>
<br>
<div class="vid-container">
<div style="max-width:1280px;margin:0 auto; padding:5px; " >
<div style="position: relative;padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe width="1280" height="720" frameborder="0" allowfullscreen="" autoplay src="https://www.youtube.com/embed/WSYWLB3QKik?autoplay=1&mute=1" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 1280px; max-height: 720px;" tabindex="-1"></iframe>
</div>
</div>
</div>
<section>
<div class="content">
<p>Hardwell (nascido como Robbert van de Corput em Breda, Holanda) é um produtor progressivo de electro house DJ. Em 2009 , após o sucesso de “Show Me Love vs.Be”, ele começou a produzir várias outras track “singles” de sucesso na EDM como “Encoded” e “Cobra” e também começou a forma grandes parcerias como o seu ídolo de infância DJ Tiesto e entre outros nomes da musica eletrônica.
</body>
</html>
(Academic work)

You can look at wheel event.
window.addEventListener("wheel", function(e)
{
let Video = document.querySelector("iframe");
//If deltaY bigger than zero that means we are scrolling down.
if(e.deltaY > 0)
{
Video.style.display = "none";
}
else
{
Video.style.display = "initial";
}
});

Why my buttons are overlapping my input fiels?

I am following a tutorial to make a quiz in js. I am not very good especially with css. Can someone help me to figure it out why at question 3 my answers(from 1-5) are behind the buttons? I want the button to always be under the answers
This is how it should look like:
enter image description here
And this is how it looks:
enter image description here
(function () {
const quizContainer = document.getElementById("quiz");
const resultsContainer = document.getElementById("results");
const submitButton = document.getElementById("submit");
const myQuestions = [
{
question: `Apa pe care o consum este plata, oligoelementala, in recipient de sticla, structurata sau filtrata de la robinet`,
factor: 2,
},
{
question: `Sunt iubitor/consumator de lactate proaspete/ lactate maturate`,
factor:2,
},
{
question: `Am o toleranta buna (pot consuma fara sa dezvolt reactie cutanata/ digestiva/ respiratorie) la
ton, peste spada, rechin, somon, scoici, fructe de mare, alti pesti oceanici
produse care contin gluten: paine, cereale, biscuiti, prajituri, paste, fainoase
alune, migdale, seminte de floarea soarelui, capsuni, alte fructe de padure
mazare, fasole, linte, naut, varza, brocoli, conopida`,
factor:2,
},
{
question: `Consum de 3x/saptamana oua de pasare/icre de peste`,
factor:2,
},
{
question: `Mananc saptamanal stridii, fructe de mare, nuci si seminte, ciocolata neagra`,
factor:2,
},
{
question: `Mananc zilnic fructe de culoare mov/ negre sau rosii`,
factor:2,
},
{
question: `Mananc zilnic ulei de masline/ cocos/ unt/ulei de germeni de grau/ ulei de canepa`,
factor:2,
},
{
question: `Mananc zilnic legume cu frunze verzi : Salata verde/ spanac / rucola / leurda / nasturel /creson de apa / cicoare / andive / patrunjel`,
factor:1,
},
{
question: `Mananc zilnic dulciuri procesate, prajituri, crème`,
factor:2,
},
{
question: `Mananc zilnic proteina animala de tip carne de porc/ vita/pasare`,
factor:2,
},
{
question: `Mananc saptamanal mezeluri/patiserie/conserve sau alte alimente care contin conservanti sintetici`,
factor:1,
},
{
question: `Consum zilnic bauturi alcoolice: spirtoase/ vin/ bere/ alte bauturi alcoolice`,
factor:2,
},
{
question: `Consum zilnic minerale/ vitamine/ pulberi alcaline/ pulberi de super alimente/ ceai verde`,
factor:2,
},
{
question: `Sunt alergic la praf/ polen/ fan/ plante de sezon/ ambrozie/ artemisia/ par animale/ intepaturi insecte/ mucegaiuri/ medicamente`,
factor:1,
},
{
question: `Locuiesc intr-un oras aglomerat cu aer poluat`,
factor:1,
},
{
question: `Locuiesc intr-o zona cu linii de inalta tensiune/ antene de telecomunicatii/dorm cu telefonul mobil deschis langa pat`,
factor:1,
},
{
question: `Am afectiuni cronice diagnosticate pentru care primesc medicatie`,
factor:1,
},
{
question: ` Sunt frecvent in situatia de a apela la antibiotice pentru rezolvarea unor probleme de sanatate`,
factor:1,
},
{
question: `Am tulburari de tranzit intestinal (de exemplu mai putin de 2 scaune zilnice)`,
factor:1,
},
{
question: `Am afectiuni inflamatorii de piele sau la nivelul sitemului osteoarticular (oaselor si incheieturilor)`,
factor:2,
},
{
question: `Fac miscare zilnic sau practic sporturi de tip jogging, cardio, aerobic, sarituri`,
factor:2,
},
{
question: `Viata familiala/ profesionala/ sociala e caracterizata de stress intens`,
factor:2,
},
{
question: `Am stare de oboseala accentuata la trezire si manifest scaderea capacitatii de concentrare/ deconectare /detensionare`,
factor:1,
},
{
question: `Merg la culcare pana in ora 23:00 si am un somn odihnitor`,
factor:2,
},
{
question: `Am trecut printr-o trauma emotionala in ultimii 5 ani de tip: deces al unui membru al familiei/ divort/ accident /imbolnavire`,
factor:1,
},
];
const answersToQuiz =
[
"Niciodata",
"Rar",
"Ocazional",
"Frecvent",
"Intodeauna"
]
function buildQuiz() {
// variable to store the HTML output
const output = [];
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// variable to store the list of possible answers
const answers = [];
// and for each available answer...
for (const number in answersToQuiz) {
// ...add an HTML radio button
answers.push(
`<label>
<input type="radio" name="question${questionNumber}" value="${number}">
${parseInt(number) + 1} :
${answersToQuiz[number]}
</label>`
);
}
// add this question and its answers to the output
output.push(
`<div class="slide">
<div class="question">${parseInt(questionNumber) + 1}. ${currentQuestion.question} </div>
<div class="answers"> ${answers.join("")} </div>
</div>`
);
});
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join("");
}
function showResults() {
// gather answer containers from our quiz
const answerContainers = quizContainer.querySelectorAll('.answers');
// keep track of user's answers
let currentScore = 0;
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// find selected answer
const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
if(userAnswer === undefined)
{
alert("Va rugam sa raspundeti la toate intrebarile");
}
currentScore += (parseInt(userAnswer) + 1) * myQuestions[questionNumber].factor;
});
//display a slider
// show number of correct answers out of total
resultsContainer.innerHTML = `Curent score ${currentScore}`;
}
function showSlide(n) {
slides[currentSlide].classList.remove('active-slide');
slides[n].classList.add('active-slide');
currentSlide = n;
if(currentSlide === 0){
previousButton.style.display = 'none';
}
else{
previousButton.style.display = 'inline-block';
}
if(currentSlide === slides.length-1){
nextButton.style.display = 'none';
submitButton.style.display = 'inline-block';
}
else{
nextButton.style.display = 'inline-block';
submitButton.style.display = 'none';
}
}
function showNextSlide() {
showSlide(currentSlide + 1);
}
function showPreviousSlide() {
showSlide(currentSlide - 1);
}
// display quiz right away
buildQuiz();
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const slides = document.querySelectorAll(".slide");
let currentSlide = 0;
showSlide(0);
// on submit, show results
submitButton.addEventListener("click", showResults);
previousButton.addEventListener("click", showPreviousSlide);
nextButton.addEventListener("click", showNextSlide);
})();
#import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);
body{
font-size: 20px;
font-family: 'Work Sans', sans-serif;
color: #333;
font-weight: 300;
text-align: center;
background-color: #f8f6f0;
}
h1{
font-weight: 300;
margin: 0px;
padding: 10px;
font-size: 20px;
background-color: #444;
color: #fff;
}
.question{
font-size: 30px;
margin-bottom: 10px;
}
.answers {
margin-bottom: 20px;
text-align: left;
display: inline-block;
}
.answers label{
display: block;
margin-bottom: 10px;
}
button{
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
margin-top: 20px;
z-index: 3;
position: relative;
}
button:hover{
background-color: #38a;
}
.slide{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
opacity: 0;
transition: opacity 0.5s;
}
.active-slide{
opacity: 1;
z-index: 2;
}
.quiz-container{
position: relative;
height: 200px;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Intrebarea precedenta</button>
<button id="next">Urmatoare intrebare</button>
<button id="submit">Afla rezultatul</button>
<div id="results"></div>
<script src="QuizLogic.js"></script>
<link rel="stylesheet" href="QuizTransition.css">
</body>
</html>

You have a strict height of your main div 200px. You can do
1) Increase height depend on your content
2) Put your buttons in div after your main div
Main problem is that you don`t have a content grid. So you have to create it before put something into page

How to call an array with jQuery

I built a quiz as part of my training and I have to add a second level of questions and I do not know how someone could he help me?
What is the best way to call my second array question?
Thank you for your help!
var niveaux = [
{
"title": "Niveau 1",
"questions": [
{
"question" : "1: En fait, le Grand Paris, c’est quoi ?",
"image" : "",
"choices" : [
"La fin de la banlieue.",
"Un projet réunissant Paris et la petite couronne.",
"Ça n’existera jamais !"
],
"correct" : "Un projet réunissant Paris et la petite couronne.",
"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 qu'il réunira Paris et les communes autour.",
},
{
"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" : "/Q2.png",
"choices" : [
"L'Île de France... C'est quoi ?",
"Elle a en partie raison",
"C’est totalement faux !"
],
"correct" : "C’est totalement faux !",
"explanation" : "Ludivine doit réviser ses cours d'éducation civique. 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) soit au moins 124 communes.",
},
{
"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" : "/Q3.png",
"choices" : [
"1 janvier 2016",
"1 janvier 2017",
"1 janvier 2018"
],
"correct" : "1 janvier 2016",
"explanation" : "La Métropole existe depuis 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. Elle va progressivement passer à l'action et son Président sera élu à partir de 2020.",
},
{
"question" : "4: Anna cherche désespérément comment s'appelle le nouveau métro automatique du Grand Paris. A ton avis, tu dirais quoi toi ? ",
"image" : "/Q4.png",
"choices" : [
"L'Autometro",
"Le Grand Paris Express",
"Le Pari'Metro"
],
"correct" : "Le Grand Paris Express",
"explanation" : "Le Grand Paris ce sera aussi un nouveau grand réseau de transport en commun : le Grand Paris Express. Métro entièrement automatique, il dessinera un grand 8 autour de Paris avec 205 km de voies et 68 nouvelles gares.",
},
{
"question" : "5: Mamadou qui cherche un appartement depuis 5 ans se demande si avec la Métropole du Grand Paris, il y aura plus de logements. Tu sais ça toi: combien de logements par an faut-il construire en Île-de-France ?",
"image" : "/Q5.png",
"choices" : [
"50 000 logements",
"70 000 logements",
"100 000 logements"
],
"correct" : "70 000 logements",
"explanation" : "Les objectifs pour l'Île-de-France sont de construire 70 000 logements par an (contre un peu moins de 40 000 aujourd'hui) dont environ 37 000 dans la Métropole du Grand Paris soit presque le double de ce qui est construit actuellement. « C’est l’objectif mais y parviendra-t-elle ? » pourrait te répondre Mamadou » ",
},
{
"question" : "6 : Nolwen et Mouloud débattent pour savoir qui a eu cette idée folle du grand Paris. D'après Nolwen c'est à Nicolas Sarkozy que l'on doit cette idée. Mouloud est certain que c'est l'un de ces hommes : lequel ?",
"image" : "/Q6.png",
"choices" : [
"Napoléon III",
"Louis XVI",
"François Hollande"
],
"correct" : "Napoléon III",
"explanation" : "Même si c'est Nicolas Sarkozy qui l'a remise au goût du jour, l'idée de base est née sous Napoléon III d'après les plans du baron Haussman: il imaginait déjà étendre la capitale depuis Saint-Germain-en-Laye à l'ouest, à Marne-la-Vallée à l'est: la métropole du Grand Paris d’aujourd’hui ne va pas aussi loin.",
},
{
"question" : "7 : Abdou en est persuadé: le professeur Barban va demander d’expliquer pourquoi faire le Grand Paris ? A ton avis qui a raison?",
"image" : "/Q7.png",
"choices" : [
"Ludivine pense que c'est parce qu'il faut rééquilibrer l'économie en Île de France.",
"Mouloud est sûr à 100% que c'est parce que la banlieue c'est moche donc faut la dissoudre dans Paris qui est plus beau !",
"Samira a étudié l'histoire, elle dit que c'est parce que depuis toujours dans l'histoire Paris s'étend."
],
"correct" : "Samira a étudié l'histoire, elle dit que c'est parce que depuis toujours dans l'histoire Paris s'étend.",
"explanation" : "Paris en effet s'est toujours construite par ajouts successifs de territoires et de communes alentours, au moins jusqu’au XIXème siècle.",
},
{
"question" : "8: Mais Ludivine relance le débat… et est certaine qu’il y a d’autres raisons ?",
"image" : "/Q8.png",
"choices" : [
" Elle ajoute que c’est pour être plus fort économiquement que les autres capitales du monde",
" Mamadou dit que c’est à cause du logement : y en a pas assez de construit chaque année ! Et des transports : le RER est saturé et il marche mal !",
"Tous les 2 ont raison !"
],
"correct" : "Tous les 2 ont raison !",
"explanation": "Il y a plusieurs explications: le problème économique, celui des transports, du logement et du pouvoir(qui décide de quoi?) sont aussi importants, ce sont les 4 enjeux les plus fréquemment cités pour justifier le projet du Grand Paris. D’autres pensent que ce sont avant tout les questions d’environnement et d’inégalités qui sont importantes.",
},
{
"question" : "9: Antoine lui n’est pas d’accord du tout. Il reste convaincu que le Grand Paris c’est du flan. A ton avis pourquoi?",
"image" : "/Q9.png",
"choices" : [
"Il dit que c’est magouille politique et compagnie.",
"Il a trouvé un logement facilement lui!",
"Il pense que le Grand Paris ça va rien changer aux inégalités."
],
"correct" : "Il pense que le Grand Paris ça va rien changer aux inégalités.",
"explanation" : "Le Grand Paris oppose souvent ceux qui sont pour et ceux qui sont contre. Ceux qui sont pour y voient le retour de la croissance tandis que ceux qui sont contre pensent souvent que ça ne va rien changer aux inégalités sociales voire que la situation va empirer.",
},
{
"question" : "10: Selon Rosa, avec le Grand Paris Express il y aura 7 nouvelles lignes de métro automatique pour le métro parisien. Et d'après-vous ?",
"image" : "/Q10.png",
"choices" : [
"4",
"6",
"12"
],
"correct" : "4",
"explanation" : "Le nouveau réseau de transport apportera 4 nouvelles lignes de métro automatique autour de Paris: les lignes 15, 16, 17, 18.",
},
{
"question" : "11: Jean dit qu’il doit se rendre à l'aéroport d'Orly depuis Saint-Denis. Il prétend qu'avec le Grand Paris Express il pourra le faire avec un seul ticket",
"image" : "/Q11.png",
"choices" : [
"Non, il en faudrait au moins 2 répond Abdou",
"Jasmine assure que ce sera possible.",
"Au fait c'est quoi l'intérêt si je prends jamais l'avion ? demande Eliot."
],
"correct" : "Jasmine assure que ce sera possible.",
"explanation" : "Le nouveau réseau de transport prévoit en dehors des 4 nouvelles lignes de métro, le prolongement de la ligne 11 jusqu’à Noisy Champs et… celui de la ligne 14 de St Denis Pleyel jusqu’à Orly à l’horizon… 2027 !",
},
{
"question" : "12: D’après Amin en 2016, révolution dans les transports: ça sera la fin des zones! Avec le Grand Paris il n’y aura plus qu’une seule zone! Tu lui réponds quoi toi?",
"image" : "/Q12.png",
"choices" : [
"Calomnie, ça va pas non ! Les zones, ça existera toujours.",
"C’est vrai mais c’est la Région Île-de-France qui l'a décidé.",
"Tout à fait, le 1er ministre l’a décidé."
],
"correct" : "C’est vrai mais c’est la Région Île-de-France qui l'a décidé.",
"explanation" : "Ce n’est pas le nouveau réseau de transport Grand Paris Express ni la Métropole du Grand Paris qui peut décider de la fin des zones mais la Région Île-de-France qui dirige le STIF, le syndicat des transports de la région Île-de-France. Le dézonage est appliqué depuis septembre 2015.",
}
]
},
{
"title": "Niveau 2",
"questions": [
{
"question" : "1: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation": "",
},
{
"question" : "2: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "3: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "4: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "5: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "6: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "7: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "8: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation": "",
},
{
"question" : "9: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "10: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "11: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "12: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
}
]
}
];
var currentquestion = 0,
score = 0,
submt = true,
picked;
var quiztitle = niveaux[currentquestion]['title'];
var quiz = niveaux[currentquestion]['questions'];
$(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': '#000',
'font-weight': 700,
'background-color': '#fff'
});
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': '#ff0000'
});
$('#explanation').html('<strong>FAUX.</strong> ' + htmlEncode(quiz[currentquestion].explanation));
}
$("#submitbutton").show();
if (submt) {
submt = false;
$('.choice').off('click');
$(this).off('click');
$('#submitbutton').css({
'color': '#fff'
});
$("#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);
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('#question');
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 < 50){
$("#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! 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 une 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?</a>");
}
$(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('Suivant').css({
'font-weight': '700',
'padding': '20px 0',
'line-height': '5%',
'background': 'none',
}).appendTo('#frame');
}
function init() {
//ajoute titre
if (typeof quiztitle !== "undefined" && $.type(quiztitle) === "string") {
$(document.createElement('h1')).text(quiztitle).appendTo('#frame');
} else {
$(document.createElement('h1')).text("Quiz").appendTo('#frame');
}
//ajoute page et question
if (typeof quiz !== "undefined" && $.type(quiz) === "array") {
//ajoute première question
$(document.createElement('h2')).addClass('question').attr('id', 'question').text(quiz[0].question).appendTo('#frame');
//ajoute image si présente
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');
//ajoute choix
addChoices(quiz[0].choices);
//ajoute bouton submit
$(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('Suivant').css({
'font-weight': '700',
'padding': '20px 0',
'line-height': '5%',
'background': 'none',
}).appendTo('#frame');
$("#submitbutton").hide();
setupButtons();
}
}
init();
});
/***********************************************************/
/* Quizz Frame */
/***********************************************************/
#frame {
max-width:100% !important;
max-height:100% !important;
width:auto;
height: auto;
background: url(/Fond-bleu.png);
border-radius: 30px;
margin-top:5%;
padding-bottom:10px;
}
h1 {
font-family:'londontwo';
text-align:center;
padding-top:30px;
width:auto;
color: #ffbe92;
margin-top:-50px;
}
#question {
font-family:'londonbetween';
font-size:14pt;
padding:0;
width:auto;
max-width:500px;
text-align:center;
line-height:18pt;
margin:auto;
color: #fff;
opacity:1.4;
}
#reload{
float:right;
margin-right:20px;
margin-top:27px;
}
img.question-image {
display:block;
max-width:600px;
max-height:340px;
margin:10px auto;
border-radius: 10px;
opacity:1.2;
width:auto;
height:auto;
}
#choice-block {
display:block;
list-style:none;
width:auto;
margin:0;
padding:0;
margin-top: -2%;
margin-left: -3.5%;
color: #000;
font-family:'londonmm';
}
#submitbutton {
float:right;
margin-top:-60px;
margin-right:10px;
font-family:'londontwo';
}
#submitbutton:hover {
color:#fff;
}
#explanation {
font-size:1.2em;
margin:0px auto;
padding:20px;
width:75%;
color:#fff;
font-family:'londonmm';
}
.choice-box {
max-width:500px;
width:auto;
height:auto;
display:block;
text-align:center;
font-size:1.2em;
background:#f6f5fb;
font-family:'londonmm';
margin:10px auto;
margin-left:auto;
margin-right:auto;
opacity:0.7;
padding:10px 0;
cursor:pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 30px;
}
#media (min-width:480px) {
#frame {
padding:10px 10px 10px 10px;
}
#question {
font-family:'londonbetween';
font-size:14pt;
padding:0;
width:auto;
max-width:500px;
text-align:center;
line-height:18pt;
margin:auto;
color: #fff;
opacity:1.4;
}
img.question-image {
max-width:100%;
max-height:100%;
width:auto;
height:auto;
}
#choice-block {
width:auto;
padding:5px 5px 5px 5px;
}
#submitbutton {
margin-top:-20px;
}
#explanation {
font-size:1.2em;
margin:0px auto;
padding:10px;
width:100%;
}
}
#media (max-width:480px) {
#frame {
padding:10px 10px 10px 10px;
}
#question {
font-family:'londonbetween';
font-size:14pt;
padding:0;
width:auto;
max-width:500px;
text-align:center;
line-height:18pt;
margin:auto;
color: #fff;
opacity:1.4;
}
img.question-image {
max-width:100%;
max-height:100%;
width:auto;
height:auto;
}
#choice-block {
width:auto;
padding:5px 5px 5px 5px;
}
#submitbutton {
margin-top:-20px;
}
#explanation {
font-size:1.2em;
margin:0px auto;
padding:10px;
width:100%;
}
}
<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-2x"></i>
</a>
</div>
</div>
</html>

The best way to call a second array is that you use
$.each(niveaux.questions, function(index, question){
//You will get your question one by one here
//Rendering logic needs to be written here
});
By this you will get all your questions one by one.

Joomla 2.5: Javascript code don't work

Hi in my Joomla arcicle written using JCE editor (where I enabled Javascript code) I added this code to use and accordion panel
<script type="text/javascript">
// <![CDATA[
window.addEvent('domready', function() {
var layerdiv = new Fx.Accordion($$('.titolo'), $$('.blocco_da_espandere'), {
display: -1,
alwaysHide: 1,
onActive: function(toggler) {
toggler.setStyle('color', '#ff0000');
},
onBackground: function(toggler) {
toggler.setStyle('color', '#0000ff');
}
});
});
// ]]>
<div class="titolo">Clicca qui</div>
<div class="blocco_da_espandere" style="padding:10px;border-left:3px solid #ff0000;">Buongiorno.<br />Io sono il blocco espanso. Mi auguro che la tua giornata sia piacevole.<br /> In caso contrario, me ne farò una ragione.</div>
but in my page I see the content of the div but not the effect.

Validate Sign In

I am new to web development and I am creating a login interface for a Wi-Fi HotSpot at my university. I used bootstrap for the majority of the design and just implemented a simple form for username and password submission. However, before a user can login to the wireless hotspot they must agree to the terms & conditions checkbox each time. This is what I need validated on the login interface.
What they requested is that if the user tries to login without checking the box, that an error message popups telling the user to agree to the terms & conditions. You can see a live demo of my code here:
http://ece.uprm.edu/~s103924/Login%20Interface/test.html
I have no idea on where to begin with but have read that using javascript should be fairly simple to validate the form. Here is a copy of the source code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sign in · ECENET Wireless Internet</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 350px;
padding: 19px 29px 45px;
margin: 0 auto 20px;
background-color: #fff;
border: 2px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
</style>
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form method="post" action="https://lanaccess.ece.uprm.edu:8001/" class="form-signin">
<h2 class="form-signin-heading">ECENET Login</h2>
<input type="text" class="input-block-level" placeholder="Username" maxlength="15">
<input type="password" class="input-block-level" placeholder="Password">
<input name="redirurl" type="hidden" value="http://ece.uprm.edu">
<label class="checkbox">
<input name="termsagree" type="checkbox" value="yes"> I Agree to the <a data-toggle="modal" href="#example">Terms & Conditions</a>
</label>
<button name="accept" class="btn pull-right btn-primary" type="submit">Sign in</button>
<!--<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Terms & Conditions</a></p>-->
</form>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Términos & Condiciones:</h3>
</div>
<div class="modal-body">
<h4>A Todos Los Usuarios:</h4>
<p><ol>
<li>
La Junta de Sindicos de la Universidad de Puerto Rico, mediante Certificacion Numero 072, Serie 1999-2000 aprobo la Politica Institucional y Procedimiento Para el Uso Etico Legal de las Tecnologias de Informacion de la Universidad de Puerto Rico.</li>
<p>
<li>
Las disposiciones contenidas en esta politica son de aplicacion a toda la comunidad universitaria, clientes externos, las personas que presten servicios, asi como a todos los usuarios de los recursos de tecnologias de informacion y servicios de telecomunicaciones.</li>
<p>
<li>
Toda vez que el acceso a las redes y al ambiente de las tecnologias de informacion es un privilegio institucional que otorga la Universidad de Puerto Rico, todos los usuarios tienen la responsabilidad de usar estos recursos de una manera eficiente y efectiva, observando estrictamente todas las normas eticas y legales contenidas en los estatutos estatales, federales, asi como en los reglamentos, politicas y procedimientos de la Universidad.</li>
<p>
<li>
Cualquier violacion a las disposiciones contenidas en esta politica por parte de algun usuario, sera causa suficiente para iniciar un proceso de accion disciplinaria en su contra; incluyendo la no asignacion de los recursos y/o accesos, expulsion, despido o cualquier otra accion legal disponible.</li>
<p>
<li>
Las politicas referentes a los recursos de tecnologia de informacion estan disponibles en http://www.uprm.edu/politicas</li>
</ol></p>
</div>
<div class="modal-footer">
Close
</div>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
</body>
</html>
Any input would be greatly appreciated. At least on ideas of where to look or tutorials online that address my issue.

Here is what you do.. Change you tag to run validation function onSubmit..
<form method="post" action="https://lanaccess.ece.uprm.edu:8001/" onsubmit="return validateForm()" class="form-signin">
function validateForm()
{
var x=document.forms[0]["termsagree"].value;
if (x==null || x=="")
{
alert("You must first agree to terms and conditions");
return false;
}
}
You many need to play with the validateForm function... Remember if you return false then form will not submit.

You have to check whether the checkbox is checked or not when the user submit the form
I forgot adding the message...
$('.form-signin').on('submit', function(e) {
if (!$(this).find('input[type=checkbox]').is(':checked')){
alert('You must agree with Terms and Conditions to Sign In');
e.preventDefault();
}
});

For a single checkbox you could get that value and check on it:
change <input name="termsagree" type="checkbox" value="yes"> into:
<input id="termsagree" name="termsagree" type="checkbox" value="yes">
and then check it in script:
if (! document.getElementById('termsagree').checked) {
alert("You have to agree to the Terms&Conditions");
}
For more complex validation look here.

Thanks again for your input. After a few tries with the above answers I just couldn't understand well what I needed to do. I took the online course from w3Schools and finally understood your answers. I decided to post what I did in case someone needs this.
I created a function to validate the form like this:
function validateForm()
{
var x=document.forms["signin"]["termsagree"].checked;
if (x==null || x=="")
{
alert("You must agree to the Terms & Conditions!");
return false;
}
}
Then I changed the form to this:
<form form name="signin" method="post" action="https://lanaccess.ece.uprm.edu:8001/" onsubmit="return validateForm()" class="form-signin">
Thats pretty much it.
Reference: http://www.w3schools.com/js/js_form_validation.asp
Thanks!

Categories