This is a code for a fakechat. I want a timedelay between user input and system output. I´ve tryed setTimeout and other methods without success but I´m a beginner on JS. How can I do it? Thanks to all!
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Clarice Lispector</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Chat online com Clarice Lispector">
<style>
body {
background-color: buttonface;
font-family: Helvetica;
font-size: 10pt;
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
}
.button {
font-family: Helvetica;
font-size: 10pt;
width: 92px;
}
textarea {
font-family: arial;
font-size: 10pt;
}
select {
font-family: arial;
font-size: 10pt;
width: 350px;
margin-left: 0px;
}
td {
font-family: arial;
font-size: 10pt;
}
</style>
<script type="text/javascript">
//----Data Declarations----
var convpatterns = new Array (
new Array (".*estás aí.*" , "Olá." , "aqui estou"),
new Array (".*ola.*|.*olá.*" , "Olá.","Tudo bem?"),
new Array ("bom dia" , "bom dia"),
new Array ("boa tarde" , "boa tarde"),
new Array ("que horas são" , "boa tarde"),
new Array ("boa noite" , "boa noite"),
new Array (".*de onde voce é.*|.*você é de onde.*|.*voce é de onde.*|.*és de onde.*" , "do Brasil. Ainda que tenha nascido na Europa vim com 2 anos para o Brasil."),
new Array ("obrigado pelo seu conselho" , "Obrigado a você pela companhia."),
new Array ("obrigado|obrigada" , "Obrigado a você." , "Não tem de quê."),
new Array (".*como gosta de ser tratada.*" , "pode me tratar por Clarice."),
new Array ("(.*?)[\?]" , "Não sei responder a essa questão", "... estou procurando, estou procurando. Estou tentando entender." , "Não tenho dados suficientes para responder", "desculpe, mas não sei responder"),
new Array (".*" , "pois..." , "... estou procurando, estou procurando. Estou tentando entender." , "não percebo" , "Ainda bem que sempre existe outro dia. E outros sonhos. E outros risos. E outras pessoas. E outras coisas..." , "Desculpa, mas não entendo. Pouco ou metades nunca me completaram." , "neste momento não sei responder. Pode enviar a sua questão para o meu email."));
uinput = ""
soutput = ""
dialog = ""
//-----The Core Code------
//-------
function mainroutine() {
uinput = document.mainscreen.BasicTextArea4.value;
dialog = dialog + "Você: " + uinput + '\r' + "\n";
conversationpatterns()
dialog = dialog + '\r' + "\n";
updatescreen();
var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
}
//-------
function conversationpatterns() {
for (i=0; i < convpatterns.length; i++) {
re = new RegExp (convpatterns[i][0], "i");
if (re.test(uinput)) {
len = convpatterns[i].length - 1;
index = Math.ceil( len * Math.random());
reply = convpatterns[i][index];
soutput = uinput.replace(re, reply);
soutput = initialCap(soutput);
dialog = dialog + "Clarice: " + soutput + '\r' + "\n";
break;
}
}
}
//-------
function initScreen() {
updatescreen()
}
//-------
function updatescreen() {
document.mainscreen.BasicTextArea1.value = dialog
document.mainscreen.BasicTextArea2.value = soutput
document.mainscreen.BasicTextArea3.value = uinput
document.mainscreen.BasicTextArea4.value = ""
}
//-------
function initialCap(field) {
field = field.substr(0, 1).toUpperCase() + field.substr(1);
return field
}
//----Supplemental Code To Test System---
//------
function runtest(){
var testdata = new Array (
new Array ("Oi."),
new Array ("como gosta de ser tratada?"),
new Array ("qual o seu conselho?"),
new Array ("nunca serei capaz de escrever um livro"),
new Array ("obrigado pelo seu conselho.")
);
for (train=0; train < testdata.length; train++) {
document.mainscreen.BasicTextArea4.value = testdata[train];
mainroutine()
}
}
</script>
</head>
<body onLoad="initScreen()">
<div style="height:300px; color:white; background-color:black;margin:0px; padding:0; background-image:url(lispector.jpg); background-size: 100% 100%; ">
<br><br>
<div style="color:white; font-size:20px; line-height:150%; width:; margin:0 auto; padding:0; text-align: center">
<h1 style="font-weight:100">Conversa com Clarice Lispector</h1>
<p style="font-family: 'Neucha', cursive; letter-spacing:4px"><br>a partir de textos e entrevistas da autora</p>
</div>
<br>
<br>
</div>
<form name="mainscreen" onkeypress = "if(event.keyCode == 13) {mainroutine();return false}">
<table align="center">
<tr>
<td>
<br><br>
<textarea placeholder="Escreva a sua mensagem e pressione 'Enter'" name="BasicTextArea4" rows="2" cols="75"></textarea><br />
<textarea id="textarea_id" name="BasicTextArea1" rows="15" cols="75" ></textarea><br />
<textarea style="display:none" name="BasicTextArea2" rows="2" cols="75"></textarea><br />
<textarea style="display:none" name="BasicTextArea3" rows="2" cols="75"></textarea>
</td>
</tr>
</table>
<p align = "center">
<input id=runbutton class="button" type="button" value="Teste" name="run_button" onClick="runtest()">
<input id=helpbutton class="button" type="button" value="Ajuda" name="help_button" onClick="showhelp()">
</p>
</form>
<script>
function showhelp() {
alert("Algumas dicas para fazer conversa: \n\na escrita\no amor\nos livros\nconselhos\ngostos\ndados biográficos\nviagens...");
}
</script>
</body>
</html>
This is because dialog contains both the user & computer text in a single variable. Make a new variable for the computer dialog and another for the user dialog, finally send them at different times.
Something like this:
textareaElement.value = userDialog
setTimeout(function(){
textareaElement.value = computerDialog
}, 1000)
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.
When i click on a link, i want a div to become visible. However, i need to do this by knowing which link is clicked on, by checking which id it has. The content is hidden, but will not become visible when i click on a link. I am not allowed to use jquery. Any solution?
Javascript
function show() {
var a = document.getElementsByTagName("a");
if (a.id == "link1") {
document.getElementByID("content1").style.visibility = 'visible';
} else if (a.id == "link2") {
document.getElementByID("content2").style.visibility = 'visible';
} else if (a.id == "link3") {
document.getElementByID("content3").style.visibility = 'visible';
} else if (a.id == "link4") {
document.getElementByID("content4").style.visibility = 'visible';
}
}
function init() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
a.onclick = show;
}
window.onload = init;
HTML
<head>
<title>Inl1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style-1.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="Uppg1.js"></script>
</head>
<body>
<ul class="meny" id="menu">
<li>Utvärdering/Feedback
</li>
<li>Kontakt
</li>
<li>Öppettider
</li>
<li>Om Asperöd
</li>
</ul>
<div class="div" id="content1">
<p>Du kan kontakta oss på följande nummer:
<br/>040-123456</p>
<p>Du kan även mejla oss:
<br/>aperöd#hotmail.com</p>
</div>
<div class="div" id="content2">
<p><b>Asperåd Äventyrsland</b>
</p>
<p>Växel: 0200-123456999 (kl.08:30-15)</p>
<p>Stora Vägen 140</p>
<p>289 22 Aperöd</p>
<p>Skicka oss din fråga
</p>
</div>
<div class="div" id="content3">
<p>Vi har följande öppettider:</p>
<p>Mån-Fre: 10:00 - 20:00</p>
<p>Lör: 10:00 - 18:00</p>
</div>
<div class="div" id="content4">
<p>Asperöd är en fin park för alla möjliga personer. Vi erbjuder en massa,
<br/>men det kostar 500kr för att delta för en dag.</p>
<p>Asperöd är fylld med turister som besöker platsen minst en gång per månad.</p>
<p>Asperöd är bland de största nöjesparkerna i Scandinavien.</p>
</div>
</body>
function show(a) {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
if (a.id == "link1") {
document.getElementById("content1").style.visibility = 'visible';
}
else if (a.id == "link2") {
document.getElementById("content2").style.visibility = 'visible';
}
else if (a.id == "link3") {
document.getElementById("content3").style.visibility = 'visible';
}
else if (a.id == "link4") {
document.getElementById("content4").style.visibility = 'visible';
}
}
function init() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
a[i].setAttribute("onclick", "show(this);");
}
}
Create a links object which provides the mappings. Grab the target element from the event and store its id. Then use the id to grab the proper element's id from the links object.
function show(event){
var links = {
link1: "content1",
link2: "content2",
link3: "content3",
link4: "content4"
};
for(var x = 0; x < links.length; x++){
document.getElementById(links[id]).style.visibility = "hidden";
}
var id = event.target.id;
var a = document.getElementsByTagName("a");
document.getElementById(links[id]).style.visibility = 'visible';
}
There is also an issue with the init function. Since a is an array of elements you must iterate this array and bind the show function to the onclick event.
function init() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
for(var x = 0; x < a.length; x++){
a[x].onclick = show;
}
}
Working Example: http://jsfiddle.net/538s2/
use div.style.display = 'block'; div.style.display = 'none';
You need to do it in a different way. I've made some changes. you can copy and try this one
<head>
<title>Inl1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style-1.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="Uppg1.js"></script>
<script type="text/javascript">
function show(id){
if(id == 'link1'){
document.getElementById("content1").style.visibility = 'visible';
}
else if(id == 'link2'){
document.getElementById("content2").style.visibility = 'visible';
}
else if(id == 'link3'){
document.getElementById("content3").style.visibility = 'visible';
}
else if(id == 'link4'){
document.getElementById("content4").style.visibility = 'visible';
}
}
function init(){
var divs = document.getElementsByTagName("div");
for(i=0; i<divs.length; i++){
if(divs[i].className == "div"){
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
a.onclick = show;
}
window.onload = init;
</script>
</head>
<body>
<ul class="meny" id="menu">
<li><a href="javascript:show('link1')" id="link1" >Utvärdering/Feedback</a></li>
<li>Kontakt</li>
<li>Öppettider</li>
<li>Om Asperöd</li>
</ul>
<div class="div" id="content1">
<p>Du kan kontakta oss på följande nummer:
<br> 040-123456
</p>
<p> Du kan även mejla oss:
<br> aperöd#hotmail.com
</p>
</div>
<div class="div" id="content2">
<p><b>Asperåd Äventyrsland</b></p>
<p>Växel: 0200-123456999 (kl.08:30-15)</p>
<p>Stora Vägen 140</p>
<p>289 22 Aperöd</p>
<p>Skicka oss din fråga</p>
</div>
<div class="div" id="content3">
<p>Vi har följande öppettider:</p>
<p> Mån-Fre: 10:00 - 20:00 </p>
<p> Lör: 10:00 - 18:00 </p>
</div>
<div class="div" id="content4">
<p>Asperöd är en fin park för alla möjliga personer. Vi erbjuder en massa,
<br> men det kostar 500kr för att delta för en dag.
</p>
<p> Asperöd är fylld med turister som besöker platsen minst en gång per månad. </p>
<p> Asperöd är bland de största nöjesparkerna i Scandinavien. </p>
</div>
</body>