- A new user receives a good answer
- Clicks the tick✅ next to it
- Receives another good answer
- Proceeds to tick that as well
- Unexpected[to a new user] result: First answer gets unaccepted
- User potentially unaware of this, that answer might well have been off-screen
For most people, a checkbox/tickmark means Add to selection or Correct and is not expected to be mutually-exclusive. There is the radio button🔘 for that.
I am not proposing to change the tick to a radio button, but perhaps it could be made more obvious that it will unaccept the previous answer.
Some (runnable) ideas:
A. A simple hint on hover, as Catija suggested. Not necessarily a native tooltip, as that only appears after a delay and the new user might click before that happens.
#tick {
position: relative;
}
#tick:hover::after {
position: absolute;
top: 1.5em;
left: 0;
content: 'Example';
color: darkslategrey;
}<div id="tick">✅</div>B. Animating the green tick over from the previous answer. More intuitive but might still not be obvious what is happening if the other answer is invisible due to scroll position.
const anim = document.querySelector('.anim')
window.addEventListener('click', ev => {
switch (ev.target.id) {
case 'a1':
anim.style.top = '0px'
break
case 'a2':
anim.style.top = '50px'
break
}
}).ans {
padding-left: 2em;
position: absolute;
}
.ans:nth-child(1) {
top: 0;
}
.ans:nth-child(2) {
top: 50px;
}
.ans::before {
position: absolute;
left: 0;
content: '✔️';
}
.anim {
position: absolute;
transition: 0.5s top ease-out;
top: 0px;
}
code {
background-color: lightgrey;
}<div class="ans" id="a1">
<div>Lorem ipsum</div>
<code>answer(1);</code>
</div>
<div class="ans" id="a2">
<div>Dolor sit amet</div>
<code>answer(2);</code>
</div>
<div class="anim">✅</div>
