Building a flashcard app in Java

Building a flashcard app in Java

Learn the step-by-step process of building a flashcard app in Java using Swing. This tutorial covers GUI design, input validation, event handling, and creating an interactive quiz experience with dynamic scoring and feedback. Perfect for beginners looking to enhance their Java skills.

Getting Started

Before diving into the code, ensure you have the following prerequisites:

  • Java Development Kit (JDK): Make sure you have JDK 8 or higher installed on your system.
  • Integrated Development Environment (IDE): Using an IDE like IntelliJ IDEA, Eclipse, or NetBeans can streamline development.
  • Basic Knowledge of Java: Familiarity with Java syntax and object-oriented programming concepts will be beneficial.
Building a flashcard app in Java

Understanding the Code Structure

The Java flashcard application with GUI consists of two primary classes:

  1. FlashcardApp: The main class that builds the GUI and handles user interactions.
  2. Flash: A simple data class representing individual flashcards with a question and an answer.

The FlashcardApp class handles the application lifecycle, from initializing the GUI components to managing user interactions during the quiz. The Flash class is a data holder that stores a question and its corresponding answer, used by the FlashcardApp to manage flashcards effectively.

NOTE

You can get the source code of flashcard application in java from GitHub Repository

Git Hub Repository

you can also download the Zip File by clicking on this download button

Download Zip File

Key Features

  • User-friendly Interface: Built with Swing for a clean and simple GUI.
  • Score Tracking: Keeps track of the user’s score based on their performance.
  • Random Question Selection: Questions are chosen at random for each quiz session.

Setting Up the Project

User Workflow with example

Example of how you can add a flashcard and then submit answers to increase your score in the Flashcard App:

  1. Add a Flashcard:
    • Open the Flashcard App.
    • In the “Add Flashcard” section, enter:
      • Question: “What is the capital of France?”
      • Answer: “Paris”
    • Click the “Add Flashcard” button.
    • You should see a message saying “Flashcard added!”.
  2. Start the Quiz:
    • Click the “Start Quiz” button.
    • The question field will show: “What is the capital of France?”
  3. Submit an Answer:
    • In the “Your Answer” field, type: Paris
    • Click the “Submit Answer” button.

Expected Outcome

  • You should see a dialog box saying “Correct! Streak: 1”.
  • Your score will increase, displayed next to “Score:”.

Another Example of input validation and error handling in Java

You can repeat the steps above to add more flashcards, like so:

  1. Add Another Flashcard:
    • Question: “What is 2 + 2?”
    • Answer: “4”
  2. Start Quiz Again:
    • Click “Start Quiz”.
    • You might see the first question again or a new one based on your added flashcards.
  3. Submit Another Answer:
    • For “What is 2 + 2?”, type 4 in the answer field.
    • Click “Submit Answer”.
input validation and error handling in Java

Code Explanation of Building a flashcard app in Java

Main Class: FlashcardApp

The FlashcardApp class is responsible for creating the GUI and managing the flow of the application.

1. Constructor

public FlashcardApp() {
    flashcards = new ArrayList<>();
    score = 0;
    currentQuizIndex = -1;
    streak = 0;
    ...
}
  • Initializes an empty list for flashcards and sets the initial score, quiz index, and streak.

2. Creating the GUI

The GUI is divided into two main panels: one for adding flashcards and another for quizzing.

Adding Flashcards Panel

private JPanel createAddCardPanel() {
    JPanel panel = new JPanel();
    ...
    addButton.addActionListener(e -> addFlashcard());
    startQuizButton.addActionListener(e -> startQuiz());
    return panel;
}
  • Contains text fields for entering questions and answers, along with buttons to add flashcards and start the quiz.

3. Quiz Panel

private JPanel createQuizPanel() {
    JPanel panel = new JPanel();
    ...
    submitButton.addActionListener(e -> checkAnswer());
    return panel;
}
  • Includes a text field for user answers, a button to submit answers, and displays the score.

4. Adding Flashcards

The addFlashcard() method is called when the user clicks the “Add Flashcard” button:

private void addFlashcard() {
    String question = questionField.getText().trim();
    String answer = answerField.getText().trim();
    if (validateInput(question, answer)) {
        flashcards.add(new Flash(question, answer));
        ...
    }
}
  • Validates the input, adds the flashcard to the list, and clears the input fields.

5. Starting the Quiz

Once users have added flashcards, they can start a quiz to test their knowledge. The application resets scores and prepares to ask questions, giving users a fresh start. The startQuiz() method resets the score and begins the quiz:

private void startQuiz() {
    ...
    askNextQuestion(); // Ask the first question
}

6. Checking Answers

As users submit their answers, the application checks correctness and updates the score accordingly. Users receive immediate feedback on their performance, along with a running total of their scores. When the user submits their answer, the checkAnswer() method checks if it’s correct:

private void checkAnswer() {
    ...
    if (userAnswer.equals(correctAnswer)) {
        streak++;
        score += streak;
    } else {
        streak = 0;
    }
    ...
}
  • The score is updated based on the user’s performance, and results are displayed in the results area.

Flash Class

Users can add new flashcards by entering a question and its answer. The application validates input and provides feedback, ensuring users have added a flashcard successfully. The Flash class represents a single flashcard:

class Flash {
    private String question;
    private String answer;

    public Flash(String question, String answer) {
        this.question = question;
        this.answer = answer;
    }
    ...
}
  • Contains methods to get the question and answer.

Running the Application

To run the flashcard application, compile the code and execute the main method. Users will see a window divided into two main sections: one for adding flashcards and another for taking the quiz. This setup creates an interactive learning experience.

  1. Add Flashcards: Enter questions and answers in the provided fields and click “Add Flashcard.”
  2. Start Quizzing: Click “Start Quiz” to begin the quiz. Answer the questions and see your score update in real-time.

Potential Enhancements

While the current application provides a solid foundation, there are several ways to enhance its functionality:

  1. Persistence: Implement functionality to save flashcards to a file or database.
  2. Multiple Choice Questions: Add support for different question types.
  3. Progress Tracking: Introduce tracking for performance over time.
  4. User Authentication: Allow multiple users to manage their flashcards.
  5. Enhanced UI: Improve the user interface with better styling or animations.

Related Articles

Conclusion of Building a flashcard app in Java

Building a Flashcard App in java exemplifies how thoughtful implementation of constraints, conditions, and enhancements can create a robust and user-friendly tool. By enforcing input validation and error handling in java, the application ensures data integrity and stability. Leveraging Java Swing’s built-in components and functionalities, such as layout managers, event handling, and dynamic data structures, enhances the application’s interactivity and usability. Additionally, aesthetic considerations and motivational features like scoring and streak tracking contribute to an engaging user experience.

Source code of flashcard application in java 

import javax.swing.*;
import java.awt.*;
import java.util.ArrayList;

public class FlashcardApp {
    private ArrayList<Flash> flashcards;
    private JFrame frame;
    private JTextField questionField;
    private JTextField answerField;
    private JTextArea resultArea;
    private JTextField userAnswerField;
    private JLabel scoreLabel;
    private JButton addButton;
    private JButton startQuizButton;
    private JButton submitButton;
    private int currentQuizIndex;
    private int score;
    private int streak;

    public FlashcardApp() {
        flashcards = new ArrayList<>();
        score = 0;
        currentQuizIndex = -1;
        streak = 0;

        frame = new JFrame("Flashcard App");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLayout(new BorderLayout());
        frame.setPreferredSize(new Dimension(500, 400));
        frame.getContentPane().setBackground(new Color(240, 240, 240));

        JPanel addCardPanel = createAddCardPanel();
        frame.add(addCardPanel, BorderLayout.NORTH);

        JPanel quizPanel = createQuizPanel();
        frame.add(quizPanel, BorderLayout.CENTER);

        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }

    private JPanel createAddCardPanel() {
        JPanel panel = new JPanel();
        panel.setLayout(new GridLayout(4, 3, 10, 10));
        panel.setBorder(BorderFactory.createTitledBorder(BorderFactory.createLineBorder(Color.BLUE, 2), "Add Flashcard", 0, 0, new Font("Arial", Font.BOLD, 16), Color.BLUE));
        panel.setBackground(Color.WHITE);

        questionField = new JTextField();
        answerField = new JTextField();
        addButton = createButton("Add Flashcard", new Color(135, 206, 250)); // Sky Blue
        startQuizButton = createButton("Start Quiz", new Color(144, 238, 144)); // Light Green

        panel.add(new JLabel("Question:"));
        panel.add(questionField);
        panel.add(new JLabel("Answer:"));
        panel.add(answerField);
        panel.add(addButton);
        panel.add(startQuizButton);

        addButton.addActionListener(e -> addFlashcard());
        startQuizButton.addActionListener(e -> startQuiz());

        return panel;
    }

    private JPanel createQuizPanel() {
        JPanel panel = new JPanel();
        panel.setLayout(new BorderLayout());

        userAnswerField = new JTextField();
        submitButton = createButton("Submit Answer", new Color(144, 238, 144)); // Light Green
        scoreLabel = new JLabel("Score: 0");
        scoreLabel.setFont(new Font("Arial", Font.BOLD, 16));
        resultArea = new JTextArea();
        resultArea.setEditable(false);
        resultArea.setFont(new Font("Arial", Font.PLAIN, 14));
        resultArea.setLineWrap(true);
        resultArea.setWrapStyleWord(true);

        panel.add(new JLabel("Your Answer:"), BorderLayout.NORTH);
        panel.add(userAnswerField, BorderLayout.CENTER);
        panel.add(submitButton, BorderLayout.EAST);
        panel.add(scoreLabel, BorderLayout.WEST);
        panel.add(resultArea, BorderLayout.SOUTH);
        panel.setBackground(Color.WHITE);

        submitButton.addActionListener(e -> checkAnswer());

        return panel;
    }

    private JButton createButton(String text, Color color) {
        JButton button = new JButton(text);
        button.setBackground(color);
        button.setForeground(Color.WHITE);
        button.setFont(new Font("Arial", Font.BOLD, 14));
        return button;
    }

    private void addFlashcard() {
        String question = questionField.getText().trim();
        String answer = answerField.getText().trim();
        if (validateInput(question, answer)) {
            flashcards.add(new Flash(question, answer));
            System.out.println("Adding Flashcard - Question: '" + question + "', Answer: '" + answer + "'");
            questionField.setText("");
            answerField.setText("");
            JOptionPane.showMessageDialog(frame, "Flashcard added!", "Success", JOptionPane.INFORMATION_MESSAGE);
        }
    }

    private boolean validateInput(String question, String answer) {
        if (question.isEmpty() || answer.isEmpty()) {
            JOptionPane.showMessageDialog(frame, "Please enter both question and answer.", "Warning", JOptionPane.WARNING_MESSAGE);
            return false;
        }
        return true;
    }

    private void startQuiz() {
        if (flashcards.isEmpty()) {
            JOptionPane.showMessageDialog(frame, "No flashcards available. Please add some flashcards first.", "Error", JOptionPane.ERROR_MESSAGE);
            return;
        }

        currentQuizIndex = -1; // Reset current index
        score = 0; // Reset score
        streak = 0; // Reset streak
        scoreLabel.setText("Score: 0"); // Update score display
        askNextQuestion(); // Ask the first question
    }

    private void askNextQuestion() {
        currentQuizIndex = (int) (Math.random() * flashcards.size());
        questionField.setText(flashcards.get(currentQuizIndex).getQuestion());
        userAnswerField.setText(""); // Clear the answer field
        resultArea.setText(""); // Clear the result area
    }

    private void checkAnswer() {
        if (currentQuizIndex < 0 || currentQuizIndex >= flashcards.size()) {
            return; // No valid question to check
        }

        String userAnswer = userAnswerField.getText().trim();
        String correctAnswer = flashcards.get(currentQuizIndex).getAnswer().trim();

        // Debug output
        System.out.println("Correct Answer: '" + correctAnswer + "' (Length: " + correctAnswer.length() + ")");

        // Always increase score and reset streak for correct answers
        streak++;
        score += streak;
        scoreLabel.setText("Score: " + score);
        JOptionPane.showMessageDialog(frame, "Correct! Streak: " + streak, "Result", JOptionPane.INFORMATION_MESSAGE);

        // Display both question and user's answer in the result area
        resultArea.append("Question: " + flashcards.get(currentQuizIndex).getQuestion() + "\n");
        resultArea.append("Your Answer: " + userAnswer + "\n");

        askNextQuestion(); // Ask the next question after checking the answer
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(FlashcardApp::new);
    }
}

class Flash {
    private String question;
    private String answer;

    public Flash(String question, String answer) {
        this.question = question;
        this.answer = answer;
    }

    public String getQuestion() {
        return question;
    }

    public String getAnswer() {
        return answer;
    }
}

Leave a comment