diff --git a/src/addons/mod/quiz/services/quiz-offline.ts b/src/addons/mod/quiz/services/quiz-offline.ts
index ed477be09..15663f3d0 100644
--- a/src/addons/mod/quiz/services/quiz-offline.ts
+++ b/src/addons/mod/quiz/services/quiz-offline.ts
@@ -160,6 +160,7 @@ export class AddonModQuizOfflineProvider {
             const state = CoreQuestion.getState(dbQuestion.state);
             question.state = dbQuestion.state;
             question.status = Translate.instant('core.question.' + state.status);
+            question.stateclass = state.stateclass;
         }));
 
         return questions;
diff --git a/src/core/features/question/services/question.ts b/src/core/features/question/services/question.ts
index 0eb50b589..e65976006 100644
--- a/src/core/features/question/services/question.ts
+++ b/src/core/features/question/services/question.ts
@@ -44,6 +44,7 @@ const STATES: Record<string, CoreQuestionState> = {
         name: 'todo',
         class: 'core-question-notyetanswered',
         status: 'notyetanswered',
+        stateclass: 'notyetanswered',
         active: true,
         finished: false,
     },
@@ -51,6 +52,7 @@ const STATES: Record<string, CoreQuestionState> = {
         name: 'invalid',
         class: 'core-question-invalidanswer',
         status: 'invalidanswer',
+        stateclass: 'invalidanswer',
         active: true,
         finished: false,
     },
@@ -58,6 +60,7 @@ const STATES: Record<string, CoreQuestionState> = {
         name: 'complete',
         class: 'core-question-answersaved',
         status: 'answersaved',
+        stateclass: 'answersaved',
         active: true,
         finished: false,
     },
@@ -65,6 +68,7 @@ const STATES: Record<string, CoreQuestionState> = {
         name: 'needsgrading',
         class: 'core-question-requiresgrading',
         status: 'requiresgrading',
+        stateclass: 'requiresgrading',
         active: false,
         finished: true,
     },
@@ -72,6 +76,7 @@ const STATES: Record<string, CoreQuestionState> = {
         name: 'finished',
         class: 'core-question-complete',
         status: 'complete',
+        stateclass: 'complete',
         active: false,
         finished: true,
     },
@@ -79,6 +84,7 @@ const STATES: Record<string, CoreQuestionState> = {
         name: 'gaveup',
         class: 'core-question-notanswered',
         status: 'notanswered',
+        stateclass: 'notanswered',
         active: false,
         finished: true,
     },
@@ -86,6 +92,7 @@ const STATES: Record<string, CoreQuestionState> = {
         name: 'gradedwrong',
         class: 'core-question-incorrect',
         status: 'incorrect',
+        stateclass: 'incorrect',
         active: false,
         finished: true,
     },
@@ -93,6 +100,7 @@ const STATES: Record<string, CoreQuestionState> = {
         name: 'gradedpartial',
         class: 'core-question-partiallycorrect',
         status: 'partiallycorrect',
+        stateclass: 'partiallycorrect',
         active: false,
         finished: true,
     },
@@ -100,6 +108,7 @@ const STATES: Record<string, CoreQuestionState> = {
         name: 'gradedright',
         class: 'core-question-correct',
         status: 'correct',
+        stateclass: 'correct',
         active: false,
         finished: true,
     },
@@ -107,6 +116,7 @@ const STATES: Record<string, CoreQuestionState> = {
         name: 'mangrwrong',
         class: 'core-question-incorrect',
         status: 'incorrect',
+        stateclass: 'incorrect',
         active: false,
         finished: true,
     },
@@ -114,6 +124,7 @@ const STATES: Record<string, CoreQuestionState> = {
         name: 'mangrpartial',
         class: 'core-question-partiallycorrect',
         status: 'partiallycorrect',
+        stateclass: 'partiallycorrect',
         active: false,
         finished: true,
     },
@@ -121,6 +132,7 @@ const STATES: Record<string, CoreQuestionState> = {
         name: 'mangrright',
         class: 'core-question-correct',
         status: 'correct',
+        stateclass: 'correct',
         active: false,
         finished: true,
     },
@@ -128,6 +140,7 @@ const STATES: Record<string, CoreQuestionState> = {
         name: 'cannotdeterminestatus',
         class: 'core-question-unknown',
         status: 'cannotdeterminestatus',
+        stateclass: undefined,
         active: true,
         finished: false,
     },
@@ -583,6 +596,15 @@ export type CoreQuestionState = {
     name: string; // Name of the state.
     class: string; // Class to style the state.
     status: string; // The string key to translate the state.
+    stateclass: // A machine-readable class name for the state that this question attempt is in.
+        typeof QUESTION_TODO_STATE_CLASSES[number] |
+        typeof QUESTION_INVALID_STATE_CLASSES[number] |
+        typeof QUESTION_COMPLETE_STATE_CLASSES[number] |
+        typeof QUESTION_NEEDS_GRADING_STATE_CLASSES[number] |
+        typeof QUESTION_FINISHED_STATE_CLASSES[number] |
+        typeof QUESTION_GAVE_UP_STATE_CLASSES[number] |
+        typeof QUESTION_GRADED_STATE_CLASSES[number] |
+        undefined;
     active: boolean; // Whether the question with this state is active.
     finished: boolean; // Whether the question with this state is finished.
 };