> For the complete documentation index, see [llms.txt](https://docs.drivequant.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.drivequant.com/challenge/user-interface.md).

# User interface

The challenge component includes graphical libraries to display challenges in your application. This section explains the challenge workflow and the main steps.

There are 4 main stages in the life cycle of a challenge and the screen automatically adapts to the progression status.

### **1 - List of challenges**

The first screen displays the list of current and upcoming challenges as well as the list of completed challenges.

![Challenges list screen](https://2525923625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LXYIG5U3AO65YYFWJRK%2Fuploads%2FEWXdBMAA8BULGkVOJYyV%2Fimage.png?alt=media\&token=c04a9d06-95d7-4cf7-a3a7-95be8235251e)

The user can navigate through these two lists.

* Active - when the challenge is about to start or in progress. The user can register for a challenge or view the progress of the challenge.
* Complete - when the challenge is finished. The user will be able to view the results but only if he/she has participated in the challenge.

{% hint style="info" %}
The challenges are programmable and can be managed from the [web administration interface](https://lea.drivequant.com/#/customer). Contact your DriveQuant representative, if you want to know more about the benefits of a challenge, learn how to compose your challenge from the web interface or discover some use cases.
{% endhint %}

### **2 - User registration**

User registration for a challenge is not automated. If the user wants to participate, he/she has to register. This is what the second screen allows you to do.

Once the user has accepted to participate, a waiting screen is displayed and a countdown shows the time remaining before the challenge starts.

![Challenge registration screen](https://2525923625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LXYIG5U3AO65YYFWJRK%2Fuploads%2FOgm5pIwVa9P2lXQFsGSb%2Fimage.png?alt=media\&token=2478651f-789f-4bf8-ba4a-8fbf883fd9e9)

### **3 - Conditions to be ranked**

Even if the driver is registered, he must make a minimum number of trips and a minimum distance to reach the challenge ranking.

The conditions are adjustable when the challenge is programmed on the administration web interface.

In order to achieve a fair ranking, it is preferable to set minimum conditions to capture the behavior of the driver based on a sufficient amount of data.

The driver can follow the completion of the minimum conditions through this screen.

![Challenge conditions screen](https://2525923625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LXYIG5U3AO65YYFWJRK%2Fuploads%2FgKJsK1ZpqTneGfIFgsOo%2Fimage.png?alt=media\&token=2b641f42-97fb-4797-9174-3527ea853c87)

### **4 - Challenge details**

Once the user has achieved the minimum conditions, he/she can access several screens that present information about the challenge.

* Some statistics: average driving score, distance, duration and number of trips performed during the challenge.
* The leaderboard that displays his average score and those of the other participants
* The list of trips accounted for the challenge.
* A reminder of the challenge rules.

![Challeng details screens](https://2525923625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LXYIG5U3AO65YYFWJRK%2Fuploads%2F44IisuqA8jzUS0obNd4t%2Fimage.png?alt=media\&token=893c9b03-f649-47ee-b31b-3dd222756a83)