---
title: "Timed Questions with Countdown, Progress Bar, & Locked Response"
slug: "timed-questions-with-countdown-progress-bar-locked-response"
status: "new"
updated: 2026-07-21T20:25:38Z
published: 2026-07-21T20:25:38Z
canonical: "knowledge.technolutions.net/timed-questions-with-countdown-progress-bar-locked-response"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.technolutions.net/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

> [!WARNING]
> 📝 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.

> [!TIP]
> ⭐ Get Inspired
> 
> This article was adapted from [a post by Technolutions staff](https://community.technolutions.net/get-inspired/post/timed-questions-in-forms-with-countdown-progress-bar-locked-response-MQj92LF5uiWLPdW) in the Slate Community Forums' Get Inspired space. Have a great idea for a Get Inspired post? [Let us know](https://community.technolutions.net/get-inspired/new?post_type=gnHx7As1gZ8r6Ld)!

## 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.

![Timed form question with a countdown timer, progress bar, and locked response controls](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/01-11H9FhuROxnTcEfZoHSee.webp)

## Try the example

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

[Personal Insights - Timed Essay demo form](https://slate-admissions-showcase.technolutions.net/register/?id=069169f1-3df3-438f-87df-5cdd0027dd94)

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](https://knowledge.technolutions.net/docs/en/suitcase) ID and paste it in **Database → Suitcase Import** to import the example form:

```SuitcaseID
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.