# ⏱ Show Game Time / Timer (with a modified stopwatch)

**URL:** <https://community.glideapps.com/t/show-game-time-timer-with-a-modified-stopwatch/34256>\
**Category:** Community Resources\
**Tags:** tutorial\
**Created:** [November 9, 2021, 2:00pm UTC](https://community.glideapps.com/t/show-game-time-timer-with-a-modified-stopwatch/34256 "2021-11-09T14:00:48Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Darren\_Alderman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_alderman/32/66660_2.png) [@Darren\_Alderman](https://community.glideapps.com/u/Darren_Alderman)\
**Post date:** [November 9, 2021, 2:00pm UTC](https://community.glideapps.com/t/show-game-time-timer-with-a-modified-stopwatch/34256/1 "2021-11-09T14:00:48Z")

</div>

# Background

My [#TeamSeas Matching Game](https://community.glideapps.com/t/card-match-game-glide-games-teamseas/33620) has a timer that shows your elapsed time playing the game. If your game time is fast enough, you make it on the leaderboard.

> **See in Action**
>
> **Play the game:**  
> [https://teamseas.glideapp.io/](https://teamseas.glideapp.io/)
> 
> ![teamseasgame](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/7/578b21e47dee901c3ab91bca9752574505d2238c.gif)

# Tutorial

A few people asked how I added the game timer, so I made this video to show you how:

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/d/cd3e4197fdea4642ca6b54c93322e8e71e730d78.jpeg "How to Add a Timer to Your Glide App (plus custom CSS styling)") ](https://www.youtube.com/watch?v=SAqqIMlsWCk)

> **Use Custom CSS at your own risk 😁**
>
> ```auto
> <pre><span><style>
> 
> [title="Reset Timer"], [title="Start/Stop Timer"] {
> display: none !important;
> }
> 
> .timer-container > svg {
> display: none !important;
> }
> 
> .timer-container {
> height: 40px !important;
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [January 7, 2022, 4:18pm UTC](https://community.glideapps.com/t/show-game-time-timer-with-a-modified-stopwatch/34256/2 "2022-01-07T16:18:23Z")

</div>

Hi  
May I ask how did you get the timer to automatically start when you press the button?  
I’d like to create a form timer, i.e. how long has it taken the user to fill a certain form. Start time is when they press the button to enter the form, stop time is when they click on the submit button.  
Thanks

---

<div class="post-metadata">

**Author:** ![Darren\_Alderman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_alderman/32/66660_2.png) [@Darren\_Alderman](https://community.glideapps.com/u/Darren_Alderman)\
**Post date:** [January 7, 2022, 4:40pm UTC](https://community.glideapps.com/t/show-game-time-timer-with-a-modified-stopwatch/34256/3 "2022-01-07T16:40:28Z")

</div>

> [@Test\_Test](#):
>
> May I ask how did you get the timer to automatically start when you press the button?

You have to set the time when you press the button through a custom action before you go to the game screen.

I cover setting that up here:

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/c/6c58b2d4c6a7d200d7a6149b170ea3261558ae31.jpeg "How ​@MrBeast & @TubeBuddy got me to make this GAME for #TeamSeas") ](https://www.youtube.com/watch?v=_arNDiKa040&t=2156)

---

<div class="post-metadata">

**Author:** ![CamilleBarbe](https://avatars.discourse-cdn.com/v4/letter/c/ecccb3/32.png) [@CamilleBarbe](https://community.glideapps.com/u/CamilleBarbe)\
**Post date:** [January 14, 2022, 1:57pm UTC](https://community.glideapps.com/t/show-game-time-timer-with-a-modified-stopwatch/34256/4 "2022-01-14T13:57:20Z")

</div>

That very cool ! Could you explain how make ranking ? I would like to make a chrono, for exemple people have 1h for do the game, after this 1h hour the game close. I think if you expalin how do ranking i can find the solution for do what i want ( If you have directly the solution to my problem that fabulous).

( Sorry for my English, i’m French)

---

<div class="post-metadata">

**Author:** ![Darren\_Alderman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_alderman/32/66660_2.png) [@Darren\_Alderman](https://community.glideapps.com/u/Darren_Alderman)\
**Post date:** [January 14, 2022, 2:17pm UTC](https://community.glideapps.com/t/show-game-time-timer-with-a-modified-stopwatch/34256/5 "2022-01-14T14:17:40Z")

</div>

> [@CamilleBarbe](#):
>
> Could you explain how make ranking ?

Basically you:

1. Display the users and their scores in an inline list.

2. Then sort the inline list by score.

3. Then restrict the list to only show 10 items (or however many you want on the leaderboard).

@Robert_Petitto Has a number of tutorials on his channel showing different variations of this: [https://www.youtube.com/c/RobertPetittoWA/search?query=leaderboard](https://www.youtube.com/c/RobertPetittoWA/search?query=leaderboard)