I'm studying C programming in my spare time but to practice with a classmate I wrote a little program. I know a bit of HTML and CSS, knew nothing of javascript but that's why we invented search engines. It might not be the most beautiful thing ever written but it works for us. (it would be even better if I wrote it so that it would remember which words have passed but I haven't found time for that yet) The only thing I can't figure out is why one sentence will not word-wrap. Is it a HTML/CSS thing? Is it because of javascript?
I've tried putting the following into my CSS, but none helped: (I test in firefox but the problem is in Chrome and DuckDuckGo Browser as well)
word-wrap: normal; -ms-word-wrap: break-all; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; white-space: -moz-pre-wrap;
The sentence I'm talking about is:
kaart2.textContent = "Wat vind je van " + deHVraag[hvraagvondst] + " als eiwit/vet verhouding voor deze hond?\r\nEn heb je verder nog advies op het vlak van voeding?";
I tried taking out the newline, it didn't help. I figured it has something to do with sentence being split, but I have no idea how to fix it. I could rewrite the thing but I wouldn't learn anything from that.
Edit: After a suggestion from Ada I deleted the following code:
kaart2.style.whiteSpace = "pre";
That brought back the word-wrap for the sentence (jeej!), but it broke the newline in there. I remember now that I have been really struggling with getting the newline in there. (I knew how to do it in C and HTML, not in javascript) So if there's another way to get a newline at that point I'm also helped!
Any help will be appreciated. Thank you in advance.
The complete code: CSS:
body {
background-image: url('background.webp');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
font-family: arial;
white-space: normal;
word-wrap: normal;
-ms-word-wrap: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
white-space: -moz-pre-wrap;
}
button {
background-color: #fffacd;
}
#output {
font-family: fantasy;
}
/* @media screen and (min-width: 800px) and (max-width: 1000px) {
p.xbig { font-size: 34px; margin:0px 0 } p.big { font-size: 20px; margin:0px 0 }p { font-size: 18px; margin:0px 0 }p.klein { font-size: 16px; margin:0px 0 }
p.xklein { font-size: 14px; margin:0px 0 } p.center {text-align: center;}
h1{font-size:34px}h2{font-size:34px}h3{font-size:20px}h4{font-size:18px}h5{font-size:16px}h6{font-size:14px}
h1.klein { font-size: 18px; margin:0px 0 }} */
@media screen and (min-width: 720px) and (max-width: 800px) {
/* p.xbig { font-size: 30px; margin:0px 0 } p.big { font-size: 18px; margin:0px 0 }p { font-size: 16px; margin:0px 0 }p.klein { font-size: 14px; margin:0px 0 }
p.xklein { font-size: 14px; margin:0px 0 } p.center {text-align: center;}
h1{font-size:30px}h2{font-size:30px}h3{font-size:30px}h4{font-size:30px}h5{font-size:30px}h6{font-size:30px}
h1.klein { font-size: 16px; margin:0px 0 }} */
@media screen and (min-width: 0px) and (max-width: 720px) {
p.xbig { font-size: 30px; margin:0px 0 } p.big { font-size: 16px; margin:0px 0 }p { font-size: 14px; margin:0px 0 }p.klein { font-size: 14px; margin:0px 0 }
p.xklein { font-size: 14px; margin:0px 0 } p.center {text-align: center;}
h1{font-size:30px}h2{font-size:20px}h3{font-size:15px}h4{font-size:20px}h5{font-size:30px}h6{font-size:30px}
HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Voedingsdeskundige voor honden</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href= "flashcard.css">
</head>
<body>
<h1> Voedingsdeskundige voor honden</h1>
<h3>Oefenen met: <br>Anatomie, fysiologie en pathologie<br>
Vitamines en mineralen<br>
Praktijkvoorbeelden</h3>
<div>
<button><h3>Klik op de knop om te oefenen!</h3></button>
<br>
<br>
<br>
<br>
</div>
<div>
<h3 id="kaart1" ></h3>
</div>
<div>
<h3 id="kaart2" ></h3>
</div>
<script>
var btn = document.querySelector("button");
var out = document.getElementById("output");
btn.addEventListener("click", kiesVraag);
function kiesVraag(){
var tussenStap = 3; //var tussenStap = Math.floor(Math.random() * 4);
if (tussenStap == 0){
var orgaan= [
'Lippen',
'Kaak',
'Speekselklieren',
'Snijtanden',
'Hoektanden',
'Premolaren',
'Molaren',
'Tong',
'Strotklepje',
'Strottenhoofd',
'Slokdarm',
'Sluitspier/maagklep, cardia',
'Maagwand',
'Maagslijmvlies',
'Maagspieren',
'Klieren voor maagsap productie',
'Thermostaat van de maag',
'Sluitspier maag, pylorus',
'Twaalfvingerige darm, duedenum',
'Nuchtere darm, jejunum',
'Kronkeldarm, ileum',
'Villi',
'Darmvlokken',
'Darmslijmvlies',
'Immunoglobine A (IgA)',
'Blinde darm, cecum',
'Appendix',
'Kanteldarm',
'Sluitspier dikke darm, sphincter',
'Endeldarm, rectum',
'Anus',
'Darmflora',
'Alvleesklier',
'Nierschors',
'Niermerg',
'Nierbekken',
'Urineblaas'
];
var orgaanvondst = Math.floor(Math.random() * orgaan.length);
kaart1.textContent = orgaan[orgaanvondst];
var deOVraag= [
'Wat is het?',
'Wat doet het?',
'Wat als het stuk is?',
'Welke symptomen zie je als dit orgaan/onderdeel niet naar behoren functioneert?',
'Als het orgaan niet functioneert, wat voor gevolgen heeft dat op het verwerken/gebruiken van voeding?',
'Hoe kunnen we de voeding aanpassen als dit onderdeel zijn functie verliest?',
'Noem wat producten die passen bij verminderd functioneren van dit onderdeel.',
'Is het zinvol om het eiwit- en/of vetgehalte aan te passen bij verminderd functioneren van dit orgaan?',
'Als dit orgaan of onderdeel stuk is, is het dan nog verstandig om KVV te voeren?',
'Als dit orgaan of onderdeel stuk is of niet goed functioneert, kun je dan hele prooidieren voeren?',
'Als dit orgaan of onderdeel stuk is of niet goed functioneert, is het dan aan te raden om voer uit het prikkelingslijstje op niveau 1: onderprikkeling te geven?'
];
var ovraagvondst = Math.floor(Math.random() * deOVraag.length);
kaart2.textContent = deOVraag[ovraagvondst];
}
else if (tussenStap == 1){
var vitamine= [
// 'Vitamine A Retinol (niet voor het examen nodig)',
'Vitamine B1 Thiamine',
// 'Vitamine B2 Riboflavine (niet voor het examen nodig)',
// 'Vitamine B3 Niacine (niet voor het examen nodig)',
// 'Vitamine B5 Panthotheenzuur (niet voor het examen nodig)',
// 'Vitamine B6 Pyridoxine (niet voor het examen nodig)',
'Vitamine B8 Biotine',
'Vitamine B11 Foliumzuur',
'Vitamine B12 Cobalamine',
'Vitamine C Ascorbinezuur',
'Vitamine D',
'Vitamine E',
// 'Vitamine K Fylochinon (niet voor het examen nodig)',
];
var vitaminevondst = Math.floor(Math.random() * vitamine.length);
kaart1.textContent = vitamine[vitaminevondst];
var deVVraag= [
'Hoe krijg je deze vitamine binnen?',
'Deze vitamine lost op in?',
'Waar heb je deze vitamine voor nodig?',
'Wat gebeurt er als je te veel van deze vitamine binnenkrijgt?',
'Wat gebeurt er als je te weinig van deze vitamine binnenkrijgt?'
];
var vvraagvondst = Math.floor(Math.random() * deVVraag.length);
kaart2.textContent = deVVraag[vvraagvondst];
}
else if (tussenStap == 2){
var mineralen= [
'Fosfor P',
'Natrium Na',
'Magnesium Mg',
'Koper Cu',
'Zink Zn',
'IJzer Fe'
];
var mineralenvondst = Math.floor(Math.random() * mineralen.length);
kaart1.textContent = mineralen[mineralenvondst];
var deMVraag= [
'Wat doet dit mineraal?',
'Hoe kom je aan dit mineraal?',
'Wat gebeurt er als je te veel van dit mineraal binnenkrijgt?',
'Wat gebeurt er als je te weinig van dit mineraal binnenkrijgt?'
];
var mvraagvondst = Math.floor(Math.random() * deMVraag.length);
kaart2.textContent = deMVraag[mvraagvondst];
}
else if (tussenStap == 3){
var hond= [
'Een Franse Bulldog, 6 jaar oud, met overgewicht, wandelt een half uur per dag',
'Een Schotse collie puppy van 10 weken',
'Een Golden Retriever van 4 jaar, twee keer in de week jachttraining en wandelt zo’n twee uur per dag',
'Een Newfoundlander van 7 jaar, een gemiddelde beweger',
'Een Shih Tzu van 15 jaar, waarmee elke dag drie keer een kwartiertje geschuifeld wordt door de eigenaar die op leeftijd is',
'Een Kruising Husky/Akita, anderhalf jaar oud, wat gevoelig op verschillende voedingen en een zeer slechte eter',
'Een Duitser Herder, normaal beweegpatroon, de hond eet goed maar is toch vermagerd, de ontlasting heeft een typische substantie',
'Een Labradoodle, de hond wandelt drie uur per dag, er zijn veel problemen met de huid. Bij de dierenarts is bewezen dat het niet gaat om een omgevingsallergie.',
'Een Duitse Staande, wandelt zo’n anderhalf uur per dag, pancreatitis',
'Een Labrador, vroeger werd er veel mee gewandeld, maar nu zijn er verschillende symptomen waardoor dat niet meer zo is. Slecht eten, braken, vermageren, verminderd uithoudingsvermogen en lusteloosheid. Zeer recentelijk zie je bij de hond geelzucht.',
'Een Boompoo, 12 jaar oud, met overgewicht en diabetis',
'Gezonde Engelse springer spaniël van 3 jaar oud. Hond is erg actief en wandelt 3 uur per dag los. Eigenaren willen vers vlees voeren.',
'Een vrolijke kruising duitse pincher met duitse herder krijgt nu een brok met 26/14 en doet het daar goed op. Hij wandelt ongeveer een uur per dag en in het weekend gaan de eigenaren naar het strand toe. Ze willen hem overzetten op vers vlees.',
'Intacte Barzoi reu van 3 jaar oud. Lastige eter, beweegt iedere dag 1,5 uur aan de riem en mag onbeperkt in de tuin spelen met de andere Barzoi. Heeft ondergewicht.',
'Een saarlooswolfhond die 6 jaar oud is en heeft artrose door de heupdysplasie, dus hij kan steeds minder wandelen, nu zo’n 3x 20 minuten per dag, maar gaat wel 1x in de week naar hydrotherapie.',
'Een standaard ruwharige teckel van 4 jaar die mee gaat op de jacht in het weekend voor de gehele dag. Doordeweeks wandelt de hond 2 - 3 uur en er wordt regelmatig met hem getraind.',
'Een 7 jarige boxer met pancreatitis die iedere dag 1,5 uur wandelt, waarvan een half uur los. Krijgt nu een brok met een eiwitgehalte van 27 en een vetgehalte van 18.'
];
var hondvondst = Math.floor(Math.random() * hond.length);
kaart1.textContent = hond[hondvondst];
var deHVraag= [
'23/13',
'22/14',
'30/18',
'26/14',
'29/15',
'12/10',
'24/10'
];
var hvraagvondst = Math.floor(Math.random() * deHVraag.length);
kaart2.style.whiteSpace = "pre";
kaart2.textContent = "Wat vind je van " + deHVraag[hvraagvondst] + " als eiwit/vet verhouding voor deze hond?\r\nEn heb je verder nog advies op het vlak van voeding?";
}
}
}
</script>
</body>
</html>
Setting whiteSpace to "pre" in your JavaScript code tells the browser to preserve white space, including line breaks. By removing the line kaart2.style.whiteSpace = "pre";, the browser will not do this anymore, so your \n newline is ignored.
To work around this you can use ìnnerHTML instead of textContent. This allows you to include HTML tags instead of just text. Then you can use the <br> HTML tag to create a line break:
kaart2.innerHTML = "Wat vind je van " + deHVraag[hvraagvondst] + " als eiwit/vet verhouding voor deze hond?<br>En heb je verder nog advies op het vlak van voeding?";