graph_concept_training

---

title: Graph Concept Training

The Graph Concept Training is a question-and-answer quiz designed to help users learn and practice graph theory concepts. The training presents questions about graph properties, allows users to select answers, and provides immediate feedback. In the Graph Concept Training, one question corresponds to one category.

Note: PDF based on which the questions were made:

graph_concept_questions.pdf

How it is structured

1. Question Templates (conceptQuestionsData.ts)

All the questions are currently in the questionTemplates array, which contains template objects for each type of question. Each template defines:

interface QuestionTemplate {
    id: number;                  // Unique identifier
    category: QuestionCategory;  // Type of question (e.g., EDGE_SET, VERTEX_COUNT)
    text: string;               // Question text (can include placeholders)
    difficulty: "easy" | "medium" | "hard";
    graphGenerator: (params) => GraphTS<...>;  // Creates graph for the question
    calculateCorrectAnswer: (params) => string; // Determines correct answer
    optionGenerator: (params, correctAnswer) => string[]; // Creates answer options
    formatText?: (params) => string;           // Optional text formatting for when there are placeholders in the text
    generateParams?: (graph) => QuestionParams; // Optional parameter generation
    graphParams?: {...};                       // Optional graph generation parameters
}

2. Helper Functions

Common graph operations and calculations to get answers for above questions are in helper functions. For example:

conceptFunctions.ts

• isTree(): Checks if a graph is a tree
• calculateVertexDegrees(): Computes vertex degrees
• findMaxDegree(): Finds maximum degree
• findMostFrequentDegree(): Determines most frequent/common degree
• findUndirectedPath(): Finds a path for undirected graphs
• hasAnyUndirectedPath(): Checks whether a path exists in an undirected graph
• isValidUndirectedPath(): Checks whether a path in an undirected graph is valid
• findPerfectMatching(): Finds perfect matching for undirected graphs

graphs.ts

• isConnected(): Verifies graph connectivity

3. UI Components

• GraphConceptTrainingPage.tsx: Main container component
• QuestionDisplay.tsx: Handles question presentation and user interaction
• SvgGraph.tsx: Renders graph visualizations (creates an SVG graph)
• CategorySelection.tsx: Choose categories for training
• Feedback.tsx: Display results of the training

Note: A better way would be to use the training page UI with the Visualiser that we already have. But we had issues with it so this is what we have for now

How to add new categories

1. Add a new category for the new question in the QuestionCategory enum of question-types.ts
2. Add the question object to questionTemplates array in conceptQuestionsData.ts and modular functions in conceptFunctions.ts like below:

{
    id: nextAvailableId,
    category: QuestionCategory.YOUR_CATEGORY,
    text: "Your question text",
    graphGenerator: (params) => {
        // Generate appropriate graph
        return getRandomGraph(params);
    },
    calculateCorrectAnswer: (params) => {
        // Calculate correct answer
        return result.toString();
    },
    optionGenerator: (params, correctAnswer) => {
        // Generate plausible wrong answers
        return [correctAnswer, wrongOption1, wrongOption2, wrongOption3].sort(() => Math.random() - 0.5);
    },
    difficulty: "medium"
}

3. Add the category and the question in the categoryQuestions record of CategorySelection.tsx
4. Add a corresponding hint for the question in QuestionDisplay.tsx

Additional Feature Enhancement Ideas

1. Add questions from the PDF, which contain graphs as answer options.
2. Add a button to skip questions so the user can answer them later.