Show the number of locked students on the Exam page during the exam.

Author: krulis-martin

src/components/widgets/Box/Box.js

@@ -85,7 +85,7 @@ class Box extends Component {
           <Card.Title className={flexTitle ? 'd-flex justify-content-between float-none' : null}>
             {title}
 
-            <span className="whenTargetted text-warning">
+            <span className="whenTargeted text-warning">
               <Icon
                 icon="highlighter"
                 gapLeft={2}

src/containers/App/recodex.css

@@ -234,11 +234,11 @@ a:focus {
 }
 
 
-.whenTargetted {
+.whenTargeted {
   display: none;
 }
 
-:target .whenTargetted {
+:target .whenTargeted {
   display: initial;
 }
 

src/pages/GroupExams/GroupExams.js

@@ -159,17 +159,30 @@ class GroupExams extends Component {
                 <Col xs={12}>
                   <Box
                     title={
-                      this.state.examInProgress ? (
-                        <FormattedMessage
-                          id="app.groupExams.studentsBoxTitle"
-                          defaultMessage="Participating students"
-                        />
-                      ) : (
-                        <FormattedMessage
-                          id="app.groupExams.locksBoxTitle"
-                          defaultMessage="Recorded student locking events"
-                        />
-                      )
+                      <>
+                        {this.state.examInProgress ? (
+                          <FormattedMessage
+                            id="app.groupExams.studentsBoxTitle"
+                            defaultMessage="Participating students"
+                          />
+                        ) : (
+                          <FormattedMessage
+                            id="app.groupExams.locksBoxTitle"
+                            defaultMessage="Recorded student locking events"
+                          />
+                        )}
+                      </>
+                    }
+                    customIcons={
+                      this.state.examInProgress && lockedStudents && lockedStudents.length >= 0 ? (
+                        <small className="text-body-secondary opacity-50 me-3">
+                          <FormattedMessage
+                            id="app.groupExams.studentsCount"
+                            defaultMessage="({count, plural, one {# student} other {# students}})"
+                            values={{ count: lockedStudents ? lockedStudents.length : 0 }}
+                          />
+                        </small>
+                      ) : null
                     }
                     noPadding
                     unlimitedHeight>