Incorrect Icon Logic in `AttemptLogItem.vue`

[EshaanAgg]

Observed behavior

Currently, the AttemptLogItem.vue uses the following logic to determine the icon to be displayed for the attempt:

https://github.com/learningequality/kolibri/blob/87418dd7b5dedf0a09213b8e209d61cc341b20ef/kolibri/core/assets/src/views/AttemptLogItem.vue#L18-L51

This logic would never show the Hinted icon to the user! (The attemptLog.correct key can have the values true, false or undefined. In the case of true, we would hit the second branch and display the correct icon, and in the false cases, we would hit the fourth branch, and thus, the incorrect icon would be displayed.)

Expected behavior

We should finalize one of the following expected behaviors:

• If the answer is incorrect, we should first check whether the hint was taken. If the same was taken, we show the Hinted icon, and if the same was not taken, then we show the Incorrect icon. This would require moving the check for hint before the incorrect branch and adding comments to convey this specific indent when ordering.
• We make the hinted state independent of the correctness, i.e., if the hint was taken, we always show the hint icon, whether the current state is correct or incorrect. This would require moving the hint icon to a separate v-if branch.
• Possibly remove the hinted state altogether from the UI?

User-facing consequences

• Better UX when using the application

[rtibbles]

Hrm, my first question is whether this is necessary - I think (but am happy to be corrected) that the AttemptLogItem component is only used in the Quiz and Practice Quiz reports - in which case, a hinted state is not possible.

[MisRob]

Hrm, my first question is whether this is necessary - I think (but am happy to be corrected) that the AttemptLogItem component is only used in the Quiz and Practice Quiz reports - in which case, a hinted state is not possible.

It sounds to me that's what @EshaanAgg suggests as one possible solution here "Possibly remove the hinted state altogether from the UI"?