目录

Project overview

Burn-up chart

SCRUM table

Here is the updated progress table for the focus mode optimization sprint with the project manager added:

Feature Optimization Background

Previously, the focus mode had the following user experience issues:

1.When the focus mode is activated, clicking any button will immediately reset the time without any warning. Therefore, when there is a case of accidental touch by the user, the function does not work well.

2.Users are unable to define the specific time they want to focus on based on the actual situation. One likely scenario is that when the user intends to focus for 50 minutes, but since they haven't customized the selection mode, they can only choose 40 minutes for recording.

Optimization Goals

1.Add a prompt pane. When the mouse accidentally touches it, the pane will pop up to remind the user whether to continue the current action.

2.Add the option to customize the duration of concentration, allowing users to define any desired duration according to their own needs.

Added Function Demonstration

Corresponding Commit

Technical Implementation Details

1. Based on the previous code, add a prompt pane when the mouse accidentally touches it.

   handleTimerComplete() {
        this.pause();
        
        // Play notification sound
        this.playNotificationSound();
        
        // Save focus session to the database (only save when focus mode is completed)
        if (this.isFocusMode) {
            this.saveFocusSession();
        }
        
        // Automatically switch to the next mode
        this.isFocusMode = !this.isFocusMode;
        this.remainingTime = this.isFocusMode ? this.focusDuration : this.breakDuration;
        this.updateDisplay();
        
        // Automatically exit full screen (if supported)
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        
        // Show notification
        const t = (window.TRANSLATIONS || {});
        const msg = this.isFocusMode
          ? (t.break_over_start_focus || 'Break is over — time to focus!')
          : (t.focus_over_take_break || 'Focus time is over — take a break!');
        showNotification(msg);
    }
   
    // Handle key press events
    handleKeyPress(event) {
        // Allowed functional keys: Space (Pause/Resume), ESC (Exit Fullscreen), F11 (Fullscreen)
        const allowedKeys = [' ', 'Escape', 'F11'];
   
        if (!allowedKeys.includes(event.key) && !event.ctrlKey && !event.metaKey) {
            event.preventDefault();
            this.showWarningDialog();
        }
    }
   
    // Show warning dialog
    showWarningDialog() {
        const t = (window.TRANSLATIONS || {});
        const warningMessage = t.focus_mode_warning_message || "Are you sure to proceed? If so, the duration of your current study will not be included in the records.";
   
        if (confirm(warningMessage)) {
            // User confirms to proceed, pause the timer
            this.pause();
        }
    }
   

   And the artistic design of the pane is as follows:

   <div id="warningModal" class="modal-overlay" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-icon-container">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <h3 class="modal-title">{{ translations.focus_mode_warning }}</h3>
        </div>
        <div class="modal-body">
            <p class="modal-message">{{ translations.focus_mode_warning_message }}</p>
        </div>
        <div class="modal-footer">
            <button id="cancelBtn" class="modal-btn modal-btn-secondary">
                <i class="fas fa-times"></i> {{ translations.cancel }}
            </button>
            <button id="confirmBtn" class="modal-btn modal-btn-primary">
                <i class="fas fa-check"></i> {{ translations.continue }}
            </button>
        </div>
    </div>
   </div>
   

   When the mouses touched it, a warning message "Are you sure to proceed? If so, the duration of your current study will not be included in the records." will be given. And the user should confirm it if they want to leave. If they confirm to leave without finishing the tasks, the code will not call the function saveFocusSession(), and this period of time will not be included in the total duration.

2.Based on the previous code, add the option to customize the duration of concentration. And considering the actual situation, the duration of concentration is ranging from 1 minutes to 240 minutes.

    reset() {
        this.pause();
        this.remainingTime = this.isFocusMode ? this.focusDuration : this.breakDuration;
        this.updateDisplay();
    }

    // custom duration converting
    setDuration(focusMinutes, breakMinutes) {
        this.focusDuration = focusMinutes * 60;
        this.breakDuration = breakMinutes * 60;
        this.reset();
    }
    // custom duration setting
    const focusDurationInput = document.querySelector('#focus-duration');
    const breakDurationInput = document.querySelector('#break-duration');
    const applyDurationButton = document.querySelector('#apply-duration');
    
    if (focusDurationInput && breakDurationInput && applyDurationButton) {
        applyDurationButton.addEventListener('click', function() {
            const focusMinutes = parseInt(focusDurationInput.value);
            const breakMinutes = parseInt(breakDurationInput.value);
            
            if (focusMinutes > 0 && breakMinutes > 0) {
                window.focusTimer.setDuration(focusMinutes, breakMinutes);
            }
        });
    }

And the artistic design of the added part is as follows：

            <!-- Custom Time Input -->
            <div class="custom-time-section">
                <div class="custom-time-group">
                    <input type="number" id="customMinutes" min="1" max="240" placeholder="{{ translations.custom_minutes_placeholder }}">
                    <button id="setCustomTime" class="preset-btn">{{ translations.set }}</button>
                </div>
            </div>

When the page loads, the input is read and the handler for the "Apply" button is bound. The minutes are read from the input box and the setDuration() function is called. In the setDuration() function, the input is converting to seconds and reset() function is used to reset the remainingTime.

Summary and Future Outlook

Optimization Results Summary

Through this Beta sprint optimization, the focus mode has been significantly improved in the following aspects:

1.User Experience: Successfully addressed the pain point where accidental clicks would immediately reset the timer without warning. By introducing a prompt pane and a customizable duration feature (ranging from 1 to 240 minutes), the system now adapts flexibly to various study rhythms, greatly reducing user frustration.
2.Performance: Utilized asynchronous logic and an instant reset mechanism to ensure zero latency during timer transitions and modal interactions, enhancing the overall responsiveness of the interface.
3.Reliability: Established a "conditional persistence" mechanism. The system only saves session data upon the successful completion of a task. If a session is interrupted and confirmed via the dialog, the saveFocusSession() function is bypassed, ensuring that study records remain accurate and untainted by incomplete sessions.

Technical Implementation Highlights

1.Secure Countdown Confirmation Mechanism: Built a double-layered protection barrier using a JavaScript event interceptor and a custom HTML modal. This setup effectively identifies and intercepts non-intended exit operations.

2.Dynamic Duration Configuration Logic: Implemented the data transformation layer, which accurately converts user-inputted minutes into the precise second-based variables required by the system, using the reset function to keep the UI and logic states synchronized.

3.Refined Data Persistence Strategy: Within the handling complete time logic, a state-check ensures that the database is only updated under the specific condition of "Focus Mode Completed," optimizing database query overhead and guaranteeing high data quality.

4.Comprehensive Error Handling and Asynchronous Interaction: Integrated AJAX-style asynchronous principles with strict input validation (enforcing the 1–240 minute range), strengthening system fault tolerance and providing real-time feedback to the user.

Future Optimization Directions

1.Biometric Integration: Explore the integration of fingerprint or facial recognition technology for identity verification when initiating high-intensity focus sessions.

2.Cross-Device Synchronization and Cloud Storage：Develop the cloud synchronization function, enabling users to seamlessly switch between focused states on different devices (such as mobile phones, tablets, and computers)

3.Gamification and Positive Reinforcement：Introduce a virtual achievement system, for each high-quality focused conversation completed by the user, they can unlock a medal or accumulate points on the web page.
This optimization fully demonstrates user-centered design principles, significantly improving operational convenience.

Photos of team members working together