Timed Questions with Countdown, Progress Bar, & Locked Response

Use custom JavaScript and CSS to create timed response fields on a form. This example starts a countdown when the respondent begins typing, displays a progress bar, and locks the response when time expires.

📝 Note

This article describes a highly custom setup that uses JavaScript and CSS. Test it thoroughly before using it in a live application or form.

   

       

⭐ Get Inspired

   

   

This article was adapted from a post by Technolutions staff in the Slate Community Forums' Get Inspired space. Have a great idea for a Get Inspired post? Let us know!

What the example does

The example form includes three timed essay questions. Each field starts its timer on the respondent’s first keystroke. When the timer expires, the field becomes read-only. The example also includes a one-time grace unlock window for last-minute edits.

Try the example

The demo form is person-scoped so it can be tested directly:

Personal Insights - Timed Essay demo form

To use this behavior in an application, build the form as a Slate-hosted application-scoped page and test it in the application workflow.

Try a Slate example 💼

Copy this Suitcase ID and paste it in Database → Suitcase Import to import the example form:

6e143ce3-3a12-41cd-b1b6-409c981adfb2:slate-admissions-showcase

Review the included configuration

The example includes:

• JavaScript to manage timers, locking, color transitions, and the grace unlock period.

• CSS to style the progress bars, locked state, and buttons.

• An instruction block that explains the timer behavior to respondents.

• Notes on the form that describe how to adjust timer duration, paste policy, grace period duration, colors, and field export names.

Customize the example

1. Duplicate or import the example form into a test environment.

2. Review the Notes tab on the form.

3. Update the question export names in the script if your fields use different export keys.

4. Adjust the timer duration and grace period for each question.

5. Update the colors and text to match the experience you want respondents to see.

6. Preview the form and test the full timing behavior with multiple browsers.

Find the example in Admissions Showcase

You can also explore the example in the Admissions Showcase database. Provision the database from Test & Other Environments → Clean Slate → Provision, then select Admissions Showcase as the source. After provisioning, go to Admissions Showcase → Forms → Personal Insights - Timed Essay.

Future expansion ideas

• Replace text alerts with a custom modal or toast.

• Automatically advance the respondent to the next question after each lock.

• Add audio feedback when time expires.

• Add a progress percentage label to the progress bar.