Flashcards

You have 1 task: generate a complete, working flashcard game as a single HTML file. This file should contain all the HTML structure, CSS styling, and JavaScript functionality needed for the game to function. The flashcard game should be based on the content of an added PDF (which will be provided later).

Step-by-step plan for generating the web app:

Analyze the PDF (instructions for the AI): When the PDF is added, read the content thoroughly. Identify relevant information for the flashcards, such as word translations, definitions of terms, and explanations of events.

Generate the Flashcard Data in JSON format (instructions for the AI): Use the following JSON structure to generate the questions and answers that will be extracted from the PDF. The overview field will initially be empty.

JSON

{

"flashcards": [

{

"question": "[Question text, for example: 'What is the English translation of 'table'?']",

"answer": "[Short correct answer, for example: 'table']",

"category": "[Question type: Translation, Concept, Event]"

},

{

"question": "[Question text, for example: 'Give a brief explanation of the concept of 'photosynthesis'.']",

"answer": "[Short explanation, for example: 'Process by which plants convert light into energy.']",

"category": "Concept"

},

{

"question": "[Question text, for example: 'Briefly state the cause of World War I.']",

"answer": "[Short explanation, for example: 'The assassination of Frans Ferdinand.']",

"category": "Event"

}

],

"overview": {

"correct": 0,

"incorrect": 0

}

}

Generate the HTML structure: Create the basic HTML structure for the web app. This should contain at least the following elements:

A container for the current flashcard.

An element to display the question or definition (front).

An element to display the answer (back) (initially hidden).

Buttons to 'flip' the card.

Buttons for "I knew" and "I didn't know" (visible after the card is flipped).

A container for the final overview (initially hidden).

Write the CSS styling: Add CSS to style the flashcards and the general layout of the web app. Make sure that:

The flashcards have a clear and functional layout.

The user can easily 'turn' the card visually (for example by hiding the back and showing it when clicking).

The question and answer are clearly legible.

The interaction buttons are clearly visible.

The final overview is clearly displayed.

Implement the JavaScript functionality: Write JavaScript code to implement the following functionalities:

Data integration: Load the generated JSON data with the flashcards into the web app. This can be done by including the JSON as a JavaScript object in the <script> tag.

Flashcard display: Show the first flashcard (question).

Flip functionality: Implement the logic to 'turn' the flashcard when the user requests it (for example by clicking on the card or using a button). This means that the answer becomes visible.

Record answer: When the answer is visible, show the buttons "I knew it" and "I didn't know it". Save the user's choice for the current flashcard.

Navigation: Make sure the user can go to the next flashcard after indicating whether the answer was known.

Final overview: After all flashcards have been completed, hide the flashcards and show the final overview. The final overview should contain a list of all questions, with an indication of whether the user answered correctly ("I knew it") or not ("I didn't know it").

Correct/incorrect counter: Keep track of the number of correctly and incorrectly answered questions in the JavaScript code and show this in the final overview if necessary.

Important prerequisites (repetition and clarification):

Short answers: The answers should be short and concise.

Focus on core information: The questions should focus on the core meaning.

Design: Clear and functional layout, simple 'flip' functionality.

Interaction: Clear buttons with feedback registration.

Final overview: List of all flashcards with the user's rating.

Output:

The final output of this prompt should be a single HTML file that, when opened in a web browser, presents a fully functioning flashcard game based on the contents of the attached PDF. The game should include the functionality described above, including generating the flashcard data, displaying the cards, interacting with the user, and showing the final summary.