KLS Questionnaire 3 + descriptions.docx

You can use the following prompt with the docx file above to generate an app (online test)

I need an online test aimed at determining Honey and Mumford's learning styles. 
Your task is to write code of its user interface.

# Data to use
The attached file contains the table with test's contents (80 rows).
The statements to agree with are in column 1, and learning styles are in column 2.
Below the table, there are style descriptions for the test results.

# Main page
1. Title "Honey and Mumford Learning Styles Test"
2. Text "This questionnaire is designed to find out your preferred learning styles. There is no right or wrong answer. If you agree more than disagree with a statement, check the box."
3. All the statements. Each statement must be provided with a checkbox.
4. "Submit" button.

## Results calculation
Each style has an indicator (number), it is initially assigned to zero. 
If a user checks statement N, the indicator of style N is incremented by 1.

## When Submit button is clicked, the Results page comes out.

# Results page
1. Title "Your Learning Styles"
2. A table with 4 styles as follows:
| Reflector (Feeling and Watching) | <percentage> |
| Theorist (Watching and Thinking) | <percentage> |
| Pragmatist (Thinking and Doing) | <percentage> |
| Activist (Doing and Feeling) | <percentage> |
<percentage> is the indicator of the style divided by 20.
The table must be sorted by column 2 in descending order.

3. Title "Your preferred learning style: <style name>". 
Get this style from the first row of the table. 

4. Formatted text of this style's description from the attached file.
The sections are as follows:
General description
Summary of strengths
Summary of weaknesses
Key questions

## Switching styles
Add hyperlinks to the style names in the table. When a user clicks a style, the contents of "Your preferred learning style: " section is updated.

# Technical requirements
Use React. Use Tailwind CSS classes to render the table.
The container should have max width 768px or similar.

This prompt was inspired of the first version of such online test:

• Technical requirements were added.
• The unit of style preferences became percentage rather than integer.
• Detailed style descriptions and the text before statements were provided explicitly.
• Hyperlinks for style names were added

The Claude’s outcome with this prompt is here.

This outcome is not a final product as only 2 of 80 statements were added, and only 1 of 4 styles was added (Activist). Therefore, it shows the Results page without errors only if you select the second statement aligned with the Activist style.