feat(timed_assessment): further improvement

- timer starts only after student click "Start" when start attempting the exam

Author: bivanalhar

app/controllers/course/assessment/submission/submissions_controller.rb

@@ -32,6 +32,8 @@ class Course::Assessment::Submission::SubmissionsController < # rubocop:disable
                    staff: 'staff',
                    staff_w_phantom: 'staff_w_phantom' }.freeze
 
+  FORCE_SUBMIT_DELAY = 5.minutes
+
   def index
     authorize!(:view_all_submissions, @assessment)
 
@@ -129,6 +131,20 @@ def fetch_live_feedback_status
     render json: { threadStatus: response_body['data']['thread']['status'] }, status: response_status
   end
 
+  def set_timer_started_at
+    timer_started_at = Time.zone.now
+
+    @submission.timer_started_at = timer_started_at
+
+    raise ActiveRecord::Rollback unless @submission.save
+
+    Course::Assessment::Submission::ForceSubmitTimedSubmissionJob.
+      set(wait_until: timer_started_at + @assessment.time_limit.minutes + FORCE_SUBMIT_DELAY).
+      perform_later(@assessment, @submission_id, @submission.creator)
+
+    render json: { timerStartedAt: timer_started_at }
+  end
+
   # Reload the current answer or reset it, depending on parameters.
   # current_answer has the most recent copy of the answer.
   def reload_answer

app/jobs/course/assessment/submission/force_submit_timed_submission_job.rb

@@ -10,7 +10,7 @@ def perform_tracked(assessment, submission_id, submitter)
     instance = Course.unscoped { assessment.course.instance }
 
     ActsAsTenant.with_tenant(instance) do
-      submission = Course::Assessment::Submission.find_by(id: submission_id)
+      submission = Course::Assessment::Submission.find_by(id: submission_id, workflow_state: 'attempting')
       return unless submission
 
       force_submit(submission, submitter)

app/models/course/assessment/assessment_ability.rb

@@ -75,8 +75,8 @@ def allow_read_material
   def allow_create_assessment_submission
     can :create, Course::Assessment::Submission,
         experience_points_record: { course_user: { user_id: user.id } }
-    can [:update, :generate_live_feedback, :save_live_feedback,
-         :create_live_feedback_chat, :fetch_live_feedback_status],
+    can [:update, :generate_live_feedback, :save_live_feedback, :set_timer_started_at, :create_live_feedback_chat,
+         :fetch_live_feedback_status],
         Course::Assessment::Submission, assessment_submission_attempting_hash(user)
   end
 

app/models/course/assessment/submission.rb

@@ -11,11 +11,8 @@ class Course::Assessment::Submission < ApplicationRecord
 
   acts_as_experience_points_record
 
-  FORCE_SUBMIT_DELAY = 5.minutes
-
   after_save :auto_grade_submission, if: :submitted?
   after_save :retrieve_codaveri_feedback, if: :submitted?
-  after_create :create_force_submission_job, if: :attempting?
 
   workflow do
     state :attempting do
@@ -235,14 +232,6 @@ def assigned_questions
       extending(Course::Assessment::QuestionsConcern)
   end
 
-  def create_force_submission_job
-    return unless assessment.time_limit
-
-    Course::Assessment::Submission::ForceSubmitTimedSubmissionJob.
-      set(wait_until: created_at + assessment.time_limit.minutes + FORCE_SUBMIT_DELAY).
-      perform_later(assessment, id, creator)
-  end
-
   # The answers with current_answer flag set to true, filtering out orphaned answers to questions which are no longer
   # assigned to the submission for randomized assessment.
   #

app/views/course/assessment/submission/submissions/_submission.json.jbuilder

@@ -24,6 +24,8 @@ json.submission do
     json.id submission.course_user.id
   end
 
+  json.timerStartedAt submission.timer_started_at if assessment.time_limit
+
   submitter_course_user = submission.creator.course_users.find_by(course: submission.assessment.course)
   end_at = assessment.time_for(submitter_course_user).end_at
   bonus_end_at = assessment.time_for(submitter_course_user).bonus_end_at

app/views/course/assessment/submission/submissions/index.json.jbuilder

@@ -11,6 +11,7 @@ json.assessment do
   json.filesDownloadable @assessment.files_downloadable?
   json.csvDownloadable @assessment.csv_downloadable?
   json.passwordProtected @assessment.session_password_protected?
+  json.hasTimeLimit @assessment.time_limit
   json.canViewLogs can? :manage, @assessment
   json.canPublishGrades can? :publish_grades, @assessment
   json.canForceSubmit can? :force_submit_assessment_submission, @assessment
@@ -38,6 +39,7 @@ json.submissions @course_users do |course_user|
     json.workflowState submission.workflow_state
     json.grade submission.grade.to_f
     json.pointsAwarded submission.current_points_awarded
+    json.timerStartedAt submission.timer_started_at if @assessment.time_limit
     json.dateSubmitted submission.submitted_at&.iso8601
     json.dateGraded submission.graded_at&.iso8601
     json.logCount submission.log_count

client/app/api/course/Assessment/Submissions.js

@@ -97,6 +97,12 @@ export default class SubmissionsAPI extends BaseAssessmentAPI {
     );
   }
 
+  setTimerStartAt(submissionId) {
+    return this.client.patch(
+      `${this.#urlPrefix}/${submissionId}/set_timer_started_at`,
+    );
+  }
+
   reloadAnswer(submissionId, params) {
     return this.client.post(
       `${this.#urlPrefix}/${submissionId}/reload_answer`,

client/app/bundles/course/assessment/submission/actions/index.js

@@ -145,6 +145,28 @@ export function unsubmit(submissionId) {
   };
 }
 
+export function setTimerStartAt(submissionId, setExamNotice, setTimerNotice) {
+  return (dispatch) => {
+    dispatch({ type: actionTypes.SET_TIMER_STARTED_AT_REQUEST });
+
+    return CourseAPI.assessment.submissions
+      .setTimerStartAt(submissionId)
+      .then((response) => response.data)
+      .then((data) => {
+        dispatch({
+          type: actionTypes.SET_TIMER_STARTED_AT_SUCCESS,
+          payload: data,
+        });
+        setExamNotice(false);
+        setTimerNotice(false);
+      })
+      .catch(() => {
+        dispatch({ type: actionTypes.SET_TIMER_STARTED_AT_FAILURE });
+        dispatch(setNotification(translations.startTimedExamAssessmentFailed));
+      });
+  };
+}
+
 export function mark(submissionId, grades, exp) {
   const payload = {
     submission: {

client/app/bundles/course/assessment/submission/components/WarningDialog.tsx

@@ -1,4 +1,5 @@
 import { FC, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import {
   Button,
   Dialog,
@@ -8,11 +9,12 @@ import {
   Typography,
 } from '@mui/material';
 
-import { useAppSelector } from 'lib/hooks/store';
+import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
-import { TIME_LAPSE_NEW_SUBMISSION_MS, workflowStates } from '../constants';
-import { remainingTimeDisplay } from '../pages/SubmissionEditIndex/TimeLimitBanner';
+import { setTimerStartAt } from '../actions';
+import { workflowStates } from '../constants';
+import RemainingTimeTranslations from '../pages/SubmissionEditIndex/components/RemainingTimeTranslations';
 import { getAssessment } from '../selectors/assessments';
 import { getSubmission } from '../selectors/submissions';
 import translations from '../translations';
@@ -23,27 +25,33 @@ const WarningDialog: FC = () => {
   const assessment = useAppSelector(getAssessment);
   const submission = useAppSelector(getSubmission);
 
+  const dispatch = useAppDispatch();
+
   const { timeLimit, passwordProtected: isExamMode } = assessment;
-  const { workflowState, attemptedAt } = submission;
+  const { workflowState, timerStartedAt } = submission;
 
   const isAttempting = workflowState === workflowStates.Attempting;
   const isTimedMode = isAttempting && !!timeLimit;
 
-  const startTime = new Date(attemptedAt).getTime();
-  const currentTime = new Date().getTime();
+  const isNewSubmission = isTimedMode && !timerStartedAt;
 
-  const submissionTimeLimitAt = isTimedMode
-    ? startTime + timeLimit * 60 * 1000
-    : null;
+  const currentTime = new Date().getTime();
 
-  const isNewSubmission =
-    currentTime - startTime < TIME_LAPSE_NEW_SUBMISSION_MS;
+  const submissionTimeLimitAt =
+    isTimedMode && timerStartedAt
+      ? new Date(timerStartedAt).getTime() + timeLimit * 60 * 1000
+      : null;
 
   const [examNotice, setExamNotice] = useState(isExamMode);
   const [timedNotice, setTimedNotice] = useState(isTimedMode);
 
+  const { submissionId } = useParams();
+  if (!submissionId) {
+    return null;
+  }
+
   const remainingTime =
-    isTimedMode && submissionTimeLimitAt! > currentTime
+    isTimedMode && timerStartedAt && submissionTimeLimitAt! > currentTime
       ? submissionTimeLimitAt! - currentTime
       : null;
 
@@ -53,28 +61,41 @@ const WarningDialog: FC = () => {
   if (examNotice && timedNotice) {
     dialogTitle = t(translations.timedExamDialogTitle, {
       isNewSubmission,
-      remainingTime: remainingTimeDisplay(
-        isNewSubmission ? timeLimit! * 60 * 1000 : remainingTime ?? 0,
+      remainingTime: (
+        <RemainingTimeTranslations
+          remainingTime={
+            isNewSubmission ? timeLimit! * 60 * 1000 : remainingTime ?? 0
+          }
+        />
       ),
-      stillSomeTimeRemaining: !!remainingTime,
-    });
-    dialogMessage = t(translations.timedExamDialogMessage, {
-      stillSomeTimeRemaining: !!remainingTime,
+
+      stillSomeTimeRemaining: isNewSubmission || !!remainingTime,
     });
+    dialogMessage = isNewSubmission
+      ? t(translations.timedExamStartDialogMessage)
+      : t(translations.timedExamDialogMessage, {
+          stillSomeTimeRemaining: !!remainingTime,
+        });
   } else if (examNotice) {
     dialogTitle = t(translations.examDialogTitle);
     dialogMessage = t(translations.examDialogMessage);
   } else if (timedNotice) {
     dialogTitle = t(translations.timedAssessmentDialogTitle, {
       isNewSubmission,
-      remainingTime: remainingTimeDisplay(
-        isNewSubmission ? timeLimit! * 60 * 1000 : remainingTime ?? 0,
+      remainingTime: (
+        <RemainingTimeTranslations
+          remainingTime={
+            isNewSubmission ? timeLimit! * 60 * 1000 : remainingTime ?? 0
+          }
+        />
       ),
-      stillSomeTimeRemaining: !!remainingTime,
-    });
-    dialogMessage = t(translations.timedAssessmentDialogMessage, {
-      stillSomeTimeRemaining: !!remainingTime,
+      stillSomeTimeRemaining: isNewSubmission || !!remainingTime,
     });
+    dialogMessage = isNewSubmission
+      ? t(translations.timedAssessmentStartDialogMessage)
+      : t(translations.timedAssessmentDialogMessage, {
+          stillSomeTimeRemaining: !!remainingTime,
+        });
   }
 
   return (
@@ -89,11 +110,17 @@ const WarningDialog: FC = () => {
         <Button
           color="primary"
           onClick={() => {
-            setExamNotice(false);
-            setTimedNotice(false);
+            if (isNewSubmission) {
+              dispatch(
+                setTimerStartAt(submissionId, setExamNotice, setTimedNotice),
+              );
+            } else {
+              setExamNotice(false);
+              setTimedNotice(false);
+            }
           }}
         >
-          {t(translations.ok)}
+          {t(translations.start, { isNewSubmission })}
         </Button>
       </DialogActions>
     </Dialog>

client/app/bundles/course/assessment/submission/constants.ts

@@ -18,10 +18,6 @@ export const MEGABYTES_TO_BYTES = 1024 * 1024;
 
 export const BUFFER_TIME_TO_FORCE_SUBMIT_MS = 5 * 1000;
 
-// calculate how long has it passed since the student starts the submission
-// to still be considered a "newly created" submission
-export const TIME_LAPSE_NEW_SUBMISSION_MS = 10 * 1000;
-
 export const EVALUATE_POLL_INTERVAL_MILLISECONDS = 500;
 export const FEEDBACK_POLL_INTERVAL_MILLISECONDS = 2000;
 
@@ -301,6 +297,11 @@ const actionTypes = mirrorCreator([
 
   // Fetch annotations for single answer
   'FETCH_ANNOTATION_SUCCESS',
+
+  // Set timer upon starting timed assessment
+  'SET_TIMER_STARTED_AT_REQUEST',
+  'SET_TIMER_STARTED_AT_SUCCESS',
+  'SET_TIMER_STARTED_AT_FAILURE',
 ]);
 
 export default actionTypes;

client/app/bundles/course/assessment/submission/pages/SubmissionEditIndex/SubmissionForm.tsx

@@ -60,7 +60,7 @@ const SubmissionForm: FC<Props> = (props) => {
   const initialValues = useAppSelector(getInitialAnswer);
 
   const { autograded, timeLimit, tabbedView, questionIds } = assessment;
-  const { workflowState, attemptedAt } = submission;
+  const { workflowState, timerStartedAt } = submission;
 
   const answerIds = Object.values(questions).map(
     (question) => question.answerId,
@@ -71,11 +71,14 @@ const SubmissionForm: FC<Props> = (props) => {
   const submissionId = getSubmissionId();
 
   const hasSubmissionTimeLimit =
-    workflowState === workflowStates.Attempting && timeLimit;
+    workflowState === workflowStates.Attempting && timeLimit && timerStartedAt;
   const submissionTimeLimitAt = hasSubmissionTimeLimit
-    ? new Date(attemptedAt).getTime() + timeLimit * 60 * 1000
+    ? new Date(timerStartedAt).getTime() + timeLimit * 60 * 1000
     : null;
 
+  const isNewSubmission =
+    workflowState === workflowStates.Attempting && timeLimit && !timerStartedAt;
+
   const initialStep = Math.min(maxInitialStep, Math.max(0, step || 0));
 
   const [maxStep, setMaxStep] = useState(maxInitialStep);
@@ -223,7 +226,7 @@ const SubmissionForm: FC<Props> = (props) => {
   });
 
   return (
-    <div className="mt-4">
+    <div className={`mt-4 ${isNewSubmission && 'blur-xl'}`}>
       <FormProvider {...methods}>
         <form
           encType="multipart/form-data"