FocusFlow β Sprint Blog Series (Part 4) - Focus Mode Optimization

[FOCUS_2025_SE]

目录

• Project overview
• Burn-up chart
• SCRUM table
• Feature Optimization Background
• Optimization Goals
• Added Function Demonstration
• Corresponding Commit
• Technical Implementation Details
• Summary and Future Outlook
• Optimization Results Summary
• Technical Implementation Highlights
• Future Optimization Directions
• Photos of team members working together

---

Project overview

Course	2501_MU_SE_FZU
Assignment Requirement	Sixth Assignment - Beta Sprint
Team Name	Focus_2025
Goal of this assignment	Focus mode improvement
Author	Pengxiang Hu
Other references	https://developer.aliyun.com/article/850913

Burn-up chart

SCRUM table

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

Member	ID	Role	Completed Tasks	Time Spent	Remaining Time Estimate	Issues / Difficulties	Plans Until Tomorrow's Stand-up
Jiayao Hu	832301310	Project Manager	1. Coordinated focus mode enhancement requirements gathering 2. Organized user testing sessions for accidental click prevention feature 3. Tracked implementation progress across frontend and QA teams	3.5 hours	1 hour (stakeholder review preparation)	Balancing security features with user convenience expectations	1. Prepare feature demonstration for stakeholders 2. Document user feedback on new warning system 3. Coordinate final integration testing
Yuxiang Xie	832301327	Frontend Developer	1. Implemented warning modal for accidental clicks during focus mode 2. Designed modal UI with exclamation triangle icon and clear messaging 3. Added modal show/hide logic with smooth animations	5 hours	2 hours (accessibility testing)	Modal positioning issues on smaller screens causing layout shifts	1. Fix responsive modal positioning 2. Add keyboard navigation support 3. Implement ARIA attributes for screen readers
Pengxiang Hu	832301309	Frontend Developer	1. Added custom duration input field (1-240 minutes) 2. Implemented duration validation and error handling 3. Created preset button UI with proper styling	6 hours	1.5 hours (user testing)	Input validation rejecting valid edge cases (exactly 240 minutes)	1. Fix boundary validation logic 2. Add visual feedback for invalid inputs 3. Create input helper text
Jianyuan Wu	832302126	Frontend Developer	1. Integrated custom duration with existing timer system 2. Implemented minutes-to-seconds conversion logic 3. Added "Apply" button event handling	4.5 hours	1.5 hours (integration testing)	Duration changes not immediately reflecting in timer display	1. Fix real-time timer update synchronization 2. Add confirmation feedback after duration changes 3. Test with rapid duration changes
Hongzhi He	832302220	Frontend Developer	1. Enhanced key press event interception for focus mode 2. Implemented conditional session saving logic 3. Added ESC/F11 key exception handling	5 hours	2 hours (cross-browser testing)	Some keyboard shortcuts still interrupting focus mode unintentionally	1. Refine key press whitelist logic 2. Add user-configurable shortcut preferences 3. Test with different keyboard layouts
Feijie Zheng	832301306	QA/Test Engineer	1. Created test cases for accidental click prevention 2. Developed duration validation test suite (1-240 minute range) 3. Implemented modal interaction testing	4.5 hours	2.5 hours (automation setup)	Automated modal tests failing due to timing issues with animations	1. Add wait conditions for modal transitions 2. Create visual tests for modal appearance 3. Develop performance benchmarks for focus mode
Weixiang Zhou	832301303	QA/Test Engineer	1. Tested conditional session persistence logic 2. Verified database update behavior for completed vs interrupted sessions 3. Created edge case tests for duration boundaries	5 hours	2 hours (test coverage analysis)	Session persistence tests not covering all interruption scenarios	1. Expand test coverage for interruption scenarios 2. Create database consistency tests 3. Document data persistence requirements

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