How can I make these radiobuttons clickable in CSS/HTML? - html

Question

How can I make these radio buttons responsive? I'm not sure what I'm doing wrong. I'd like to be able to click the grid item each option is in and have it behave like a radio button, but I'm not sure what I'm missing. Any recommendations for streamlining this code would also be extremely helpful. Thanks!
body {
font-family: Arial, Helvetica;
font-size: 3vh;
background-color: #b0b0b0;
}
.wrapper {
width: 50%;
margin-left: 25%;
margin-right: 25%;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 20px;
grid-auto-rows: 100px;
justify-content: center;
background-color: ;
}
.item {
border-radius: 50px;
color: white;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.item input {
opacity: 0;
position: absolute;
/*this makes it not interfere with the text location*/
}
.item:nth-child(odd) {
background: gray;
}
.item:nth-child(odd):hover {
background: limegreen;
cursor: pointer;
}
.item:nth-child(odd):label {}
.wrapper h2 {
grid-row: 1;
grid-column: 1/-1;
}
<div id="trialDiv" style="font-size: 13pt;">
<div id="TrialQuestions">
<div id="Questions" class="wrapper">
<h2 style="text-align:center"><i>What emotion was the face expressing? </i></h2>
<div id="gap" class="item"></div>
<div id="HappyButton" class="item">
<label>
<p><input class="responseButton" id="emotion_1" name="emotion" onclick = "GrabEmotionClickTime()" type="radio" value="1" /> Happiness</p>
</label>
</div>
<div id="gap" class="item"></div>
<div id="AngryButton" class="item">
<label>
<p><input class="responseButton" id="emotion_2" name="emotion" onclick = "GrabEmotionClickTime()"type="radio" value="2" /> Anger</p>
</label>
</div>
<div id="gap" class="item"></div>
<div id="FearButton" class="item">
<label>
<p><input class="responseButton" id="emotion_4" name="emotion" onclick = "GrabEmotionClickTime()"type="radio" value="3" /> Fear</p>
</label>
</div>
<div id="gap" class="item"></div>
<div id="NeutralButton" class="item">
<label>
<p><input class="responseButton" id="emotion_4" name="emotion" onclick = "GrabEmotionClickTime()"type="radio" value="4" /> Neutral</p>
</label>
</div>
</div>
</div>
</div>

Answer 1

Without doing all the work for you, your arrangement of elements is incorrect. Here is a simple example:
https://codepen.io/seanstopnik/pen/8a2ca693e9fe1f1334b921a6d75dbe99
/* For demo only */
body {
font-family: sans-serif;
padding: 40px;
}
/* Emotion button */
.emotion-button {
position: relative;
margin: 20px; /* For demo only */
}
.emotion-button__input {
position: absolute;
left: -9999px;
}
.emotion-button__label {
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
transition: all 0.15s ease-in-out;
}
.emotion-button__input:checked ~ .emotion-button__label {
color: #fff;
background-color: green;
}
<div class="emotion-button">
<input id="r1" class="emotion-button__input" type="radio" name="emotion"/>
<label for="r1" class="emotion-button__label">Happiness</label>
</div>
<div class="emotion-button">
<input id="r2" class="emotion-button__input" type="radio" name="emotion"/>
<label for="r2" class="emotion-button__label">Anger</label>
</div>

Answer 2

Same idea as #SeanStopnik, did all the work for you:
body {
font-family: Arial, Helvetica;
font-size: 13pt;
background-color: #b0b0b0;
}
#Questions h2 {
font-style: italic;
}
.wrapper {
width: 50%;
margin-left: 25%;
margin-right: 25%;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 20px;
grid-auto-rows: 100px;
justify-content: center;
background-color: ;
}
.item label {
display: block;
border-radius: 50%;
color: white;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
background: gray;
}
.item label:hover {
background: lime;
}
.item input {
display: none;
}
.item input:checked + label {
background: blue;
}
.wrapper h2 {
grid-row: 1;
grid-column: 1/-1;
}
<div id="trialDiv">
<div id="TrialQuestions">
<div id="Questions" class="wrapper">
<h2 style="text-align:center">What emotion was the face expressing?</h2>
<div class="gap"></div>
<div id="HappyButton" class="item">
<input class="responseButton" id="emotion_1" name="emotion" type="radio" value="1" />
<label for="emotion_1">Happiness</label>
</div>
<div class="gap"></div>
<div id="AngryButton" class="item">
<input class="responseButton" id="emotion_2" name="emotion" type="radio" value="2" />
<label for="emotion_2">Anger</label>
</div>
<div class="gap"></div>
<div id="FearButton" class="item">
<input class="responseButton" id="emotion_3" name="emotion" type="radio" value="3" />
<label for="emotion_3">Fear</label>
</div>
<div class="gap"></div>
<div id="NeutralButton" class="item">
<input class="responseButton" id="emotion_4" name="emotion" type="radio" value="4" />
<label for="emotion_4">Neutral</label>
</div>
</div>
</div>
</div>
Explanation:
radio inputs are made invisible
they are placed right before their labels
labels are associated with them using for="id" attribute, so that clicking the label will check the radio button
I'm using the CSS pseudoclass :checked to target checked radio for styling
the CSS operator + allows to target the label right after the checked radio
Also:
you shouldn't have javascript event handlers in your HTML. Better use addEventListener from javascript for that. Your onclick made the click fail.
you shouldn't repeat ids in html
you shouldn't style your fonts inline
you shouldn't use <i> to make your titles italic. You should use CSS for that

Answer 3

Use font-style: italic; for the h2 element, nowdays <i> is used to insert icons
You can the id value only once in your HTML! Can't give more than one element the same id.
By clicking on the label we check the input, so we hide the input and style the label : width + height = 100%
We give all the inputs the same name to prevent checking more than one input[radio].
AddEventListener for all the inputs to toggle the class active on each one item (depends on which is the checked one).
Print to the console the id of the input that is checked.
var inputs = document.querySelectorAll('.item label');
for (let i = 0; i < inputs.length; i++){
inputs[i].addEventListener('click', (e) => {
checkEmotion(inputs[i], e);
});
}
function checkEmotion(input, e){
for(let i = 0; i < inputs.length; i++){
inputs[i].parentElement.classList.remove('active');
}
e.target.parentElement.classList.add('active');
console.log(input.nextElementSibling.getAttribute("id"));
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica;
background-color: #b0b0b0;
}
h2 {
margin: 20px 0;
font-style: italic;
}
.wrapper {
display: flex;
justify-content: center;
}
.item {
border-radius: 50px;
color: white;
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
margin: 0 10px;
background: gray;
position: relative;
overflow: hidden;
transition: all 0.2s;
}
.item.active {
background: #121212;
}
.item input {
opacity: 0;
display: absolute;
height: 0;
width: 0;
}
.item label {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.item:hover {
background: limegreen;
}
<h2 style="text-align:center">What emotion was the face expressing?</h2>
<div class="wrapper">
<div class="item">
<label for="emotion-happy">Happy</label>
<input type="radio" id="emotion-happy" name="emotion">
</div>
<div class="item">
<label for="emotion-sad">Sad</label>
<input type="radio" id="emotion-sad" name="emotion">
</div>
<div class="item">
<label for="emotion-angry">Angry</label>
<input type="radio" id="emotion-angry" name="emotion">
</div>
<div class="item">
<label for="emotion-confused">Confused</label>
<input type="radio" id="emotion-confused" name="emotion">
</div>
</div>