Hello.
I basically want to create a card layout that accepts two typing input fields.
One is a japanese character input, the other is the words meaning.
I found an addon to enable two typeans fields, but with the script i found i can only style the first type input and not the second. I think the problem is that you have to style the typeans with an Id and i cant give it a class. The front page is working by styling it with the input tag. But since on the back side it can be green / red for right and wrong it doesnt work as easily.
Someone got some hints? Maybe i should somehow make my own input field that acts like a typean but i can actually give it classes? Im still a beginner at programming.
###############################
relevant html
###############################
<label><b>Kana</b></label>
{{type:Kana}}
<label><b>English</b></label>
{{type:English}}
###############################
styling:
###############################
// just turn them into box and make them red/green
div#incorrect {
max-width: 40%;
background-color: red;
padding: 1.2rem 2rem;
font-size: 3.2rem;
cursor: pointer;
border-radius: 12px;
border: none;
margin: 0 auto;
color: white;
}
div#correct {
max-width: 40%;
background-color: green;
padding: 1.2rem 2rem;
font-size: 3.2rem;
cursor: pointer;
border-radius: 12px;
border: none;
margin: 0 auto;
color: white;
}
###############################
copy paste javascript that i found online
###############################
<div id="correctAnswer" style="display: none">{{Kana}}</div>
//Script for modifying 'Show Answer' behavior for Input types.
var htmlTextNodes = [];
var innerHTMLText = [];
var htmlNodeLength = document.getElementById("typeans").childNodes.length;
var typedAnswer;
var correctAnswer;
var firstBr = null;
var secondBr;
//capture each node to array
for (i = 0; i < htmlNodeLength; i++) {
htmlTextNodes[i] = document.getElementById("typeans").childNodes[i];
innerHTMLText[i] =
document.getElementById("typeans").childNodes[i].innerHTML;
//locate <br> tags for output change markers
if (document.getElementById("typeans").childNodes[i].nodeName == "BR") {
console.log("Runs if BR");
if (firstBr != null) {
secondBr = i;
} else {
firstBr = i;
}
}
}
//If answer is correct, firstBr will still be null, so must set to length of typeans.childNode
if (firstBr == null) {
firstBr = htmlNodeLength;
}
//assemble typed and correct answer strings
typedAnswer = innerHTMLText.slice(0, firstBr).join("");
var corr = document.getElementById("correctAnswer");
correctAnswer = corr.innerHTML;
//Modify answer output
if (typedAnswer === correctAnswer) {
var c = "<div id='correct'>" + typedAnswer + "</div>";
var d = document.getElementById("typeans");
d.innerHTML = c;
} else {
var e = "<div id='incorrect'>" + typedAnswer + "</div>";
var f = document.getElementById("typeans");
f.innerHTML = e;
}