Styling two input types

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; }

Since ids are meant to be unique, using #typeans/typeans as a selector might not work correctly if there are multiple typeans fields.
To work around that, you could use the following script to set the id of the second typeans element to typeans2.

<script>
var typeansElements = document.querySelectorAll("#typeans");
    typeansElements[1].setAttribute("id", "typeans2"); //set id of second typeans element
</script>

You could also use a similar method to add custom classes.

<script>
var typeansElements = document.querySelectorAll("#typeans");
    typeansElements[0].classList.add("custom-class1"); //add class to first typeans element
    typeansElements[1].classList.add("custom-class2"); //add class to second typeans element
</script>

If this does not solve it and/or you need further help, would you please share the name of the add-on you are using?

Thanks a lot, finally the missing piece to the puzzle. With this i can finish the card.
I am using the addon called
Multiple type fields on card for 2.1
711285688

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.