Welcome! 👋

Here you can find the instructions for the challenge. If you have any questions, feel free to ask them any time.

The Challenge

Your challenge is to build an questioneer app asking the user random questions from a list of questions. Your challenge is to build it within the next two hours and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge.

The users should be able to:

• See how many question there are left to answer
• See how many questions they have answered correctly / incorrectly
• See a visual indicator if they answered the question correctly or incorrectly
• Questions are asked in random order
• Get asked all questions but each question only once

Where to find everything

Your task is to build out the project to the designs inside the /design folder. The design consists out of two flows. The first flow is for answering a question correctly. The scond flow shows an incorreclty answered question. The design is optimized for mobile devices. Adjusting the design for larger screens is not part of the challenge.

The designs are in PNG static format. Using PNGs will mean that you'll need to use your best judgment for styles such as font-size, padding and margin.

You will find all the required assets in the /images folder. The assets are already optimized.

You will find the data for the questions in the /data folder. The data contains 20 questions in total.

There is also a style-guide.md file containing the information you'll need, such as the color palette and fonts used in the design.

Building your project

1. Create a project that you can host locally. You can use any tool you like to do this. We recommend using vite or CodeSandbox or Stackblitz.
2. Code out the project to the designs. You can use any tools you like to help you complete the challenge.
3. For interactivity, you can use any tools you like. We recommend using React.

What we value

• Prototype: A working prototype is better than a pixel-perfect header.
• HTML: Semantic HTML is important to us. We also value well-structured HTML.
• CSS: We value clean, readable CSS. We are using Tailwind in some of our projects. You can use it or any other tool you like.
• JavaScript: We stick to modern JavaScript. We are using Typescript in some of our projects but this is not a requirement for this challenge.

Have fun building! 🚀