Merge branch 'AI_quiz' into 'IT20203344'

AI_Quiz

See merge request !10

ai_quiz.py

+import numpy as np
+import pandas as pd
+import tensorflow as tf 
+import re
+import pandas as pd
+from sklearn.feature_extraction.text import TfidfVectorizer
+from sklearn.neighbors import NearestNeighbors
+from sklearn.metrics.pairwise import cosine_similarity
+import keyboard
+
+dataset = pd.read_csv('data/que_ans.csv')
+
+dataset
+
+dataset = dataset[['Question', 'Answer']]
+
+dataset
+
+def preprocess_text(text):
+    # Remove special characters and convert to lowercase
+    text = re.sub(r"[^a-zA-Z0-9]", " ", text).lower()
+    return text
+
+# Apply preprocessing to the answer column
+dataset['Answer'] = dataset['Answer'].apply(preprocess_text)
+
+data = dataset
+
+data
+
+from keras.utils import pad_sequences
+# Text tokenization
+tokenizer = tf.keras.preprocessing.text.Tokenizer()
+tokenizer.fit_on_texts(data['Answer'])
+encoded_answer = tokenizer.texts_to_sequences(data['Answer'])
+
+# Padding sequences
+max_seq_length = max(len(seq) for seq in encoded_answer)
+padded_answer = pad_sequences(encoded_answer, maxlen=max_seq_length, padding='post')
+
+padded_answer
+
+# Vectorize the existing answers
+vectorizer = TfidfVectorizer()
+answer_vectors = vectorizer.fit_transform(data['Answer'])
+
+# Generate 20 random questions
+random_indices = np.random.randint(0, len(data), size=2)
+random_questions = data['Question'][random_indices]
+random_answers = data['Answer'][random_indices]
+
+correct_count = 0
+incorrect_questions = []
+
+for question, answer in zip(random_questions, random_answers):
+    print(answer)
+    print('Question:', question)
+    user_answer = ""
+    
+    # Close answer palette when 'q' is pressed
+    while True:
+
+        if keyboard.is_pressed('q'):
+            break
+        elif keyboard.is_pressed('enter'):
+            user_answer = input("Enter your answer: ")
+            break
+
+    if not user_answer:
+        break
+    
+    random_answer_vector = vectorizer.transform([answer])
+    new_answer_vector = vectorizer.transform([user_answer])
+    
+    similarity_scores = cosine_similarity(random_answer_vector, new_answer_vector)
+    
+    if similarity_scores >= 0.4:
+        print('Correct (Similarity Score:', similarity_scores, ')')
+        correct_count += 1
+    else:
+        print('Incorrect (Similarity Score:', similarity_scores, ')')
+        incorrect_questions.append(question)
+
+print('Marks:', correct_count*20,"%\n\n")
+#print('Incorrect Questions:\n\n', incorrect_questions)
+
+incorrect_questions
+
+topics_df = pd.read_csv('data/topics.csv')
+
+topics = topics_df['topic']
+
+topics
+
+# Vectorize the user answer
+topic_vector = vectorizer.fit_transform(topics_df['topic'])
+
+# Use nearest neighbors to find the most similar answers
+neigh = NearestNeighbors(n_neighbors=3, metric='cosine')
+neigh.fit(topic_vector)
+
+ranked_topics = []
+for question in incorrect_questions:
+    question_vector = vectorizer.transform([question])  # Pass the question as a list
+    distances, indices = neigh.kneighbors(question_vector.reshape(1, -1))  # Reshape the question_vector
+
+    # Get the ranked answers
+    ranked_topic = topics_df['topic'].iloc[indices[0]]
+    ranked_topics.append(ranked_topic)
+
+# Print the similar topics for the student to follow
+print('You may consider exploring the following topics:\n')
+for topic in ranked_topics:
+    print(topic)
+
+
+
+

data/topics.csv

+,topic
+0,Cloud Computing Security
+1,Cloud Computing Data Storage
+2,Cloud Computing Performance Optimization
+3,Cloud Computing Cost Analysis
+4,Cloud Computing Infrastructure Design
+5,Cloud Computing Service Level Agreements
+6,Cloud Computing Disaster Recovery
+7,Cloud Computing Compliance
+8,Cloud Computing Automation
+9,Cloud Computing Scalability
+10,Cybersecurity Risk Management
+11,Cybersecurity Incident Response
+12,Cybersecurity Auditing
+13,Cybersecurity Compliance
+14,Cybersecurity Threat Intelligence
+15,Cybersecurity Vulnerability Management
+16,Cybersecurity Network Security
+17,Cybersecurity Application Security
+18,Cybersecurity Data Protection
+19,Cybersecurity Identity and Access Management
+20,Data Science Modeling
+21,Data Science Algorithms
+22,Data Science Machine Learning
+23,Data Science Natural Language Processing
+24,Data Science Data Mining
+25,Data Science Data Visualization
+26,Data Science Predictive Analytics
+27,Data Science Statistical Analysis
+28,Data Science Big Data
+29,Data Science Deep Learning
+30,Data Analysis Techniques
+31,Data Analysis Tools
+32,Data Analysis Processes
+33,Data Analysis Strategies
+34,Data Analysis Best Practices
+35,Data Analysis Methodologies
+36,Data Analysis Techniques
+37,Data Analysis Techniques
+38,Data Analysis Techniques
+39,Data Analysis Techniques
+40,Artificial Intelligence Algorithms
+41,Artificial Intelligence Applications
+42,Artificial Intelligence Robotics
+43,Artificial Intelligence Machine Learning
+44,Artificial Intelligence Natural Language Processing
+45,Artificial Intelligence Computer Vision
+46,Artificial Intelligence Neural Networks
+47,Artificial Intelligence Deep Learning
+48,Artificial Intelligence Knowledge Representation
+49,Artificial Intelligence Planning
+50,Machine Learning Algorithms
+51,Machine Learning Applications
+52,Machine Learning Supervised Learning
+53,Machine Learning Unsupervised Learning
+54,Machine Learning Reinforcement Learning
+55,Machine Learning Neural Networks
+56,Machine Learning Deep Learning
+57,Machine Learning Natural Language Processing
+58,Machine Learning Computer Vision
+59,Machine Learning Feature Engineering
+60,Software Development Processes
+61,Software Development Methodologies
+62,Software Development Best Practices
+63,Software Development Design Patterns
+64,Software Development Testing
+65,Software Development Automation
+66,Software Development Security
+67,Software Development Documentation
+68,Software Development Maintenance
+69,Software Development Optimization
+70,Probability Distributions
+71,Probability Theory
+72,Probability Calculus
+73,Probability Models
+74,Probability Estimation
+75,Probability Inference
+76,Probability Sampling
+77,Probability Simulation
+78,Probability Hypothesis Testing
+79,Probability Bayesian Analysis
+80,Statistics Descriptive Analysis
+81,Statistics Inferential Analysis
+82,Statistics Regression Analysis
+83,Statistics Correlation Analysis
+84,Statistics Hypothesis Testing
+85,Statistics Time Series Analysis
+86,Statistics Survival Analysis
+87,Statistics Multivariate Analysis
+88,Statistics Nonparametric Analysis
+89,Statistics Experimental Design
+90,Web Development Front-End Development
+91,Web Development Back-End Development
+92,Web Development Database Development
+93,Web Development User Interface Design
+94,Web Development User Experience Design
+95,Web Development Responsive Design
+96,Web Development Cross-Browser Compatibility
+97,Web Development Web Security
+98,Web Development Performance Optimization
+99,Web Development Content Management Systems
+100,Supervised Learning Classification
+101,Supervised Learning Regression
+102,Supervised Learning Decision Trees
+103,Supervised Learning Support Vector Machines
+104,Supervised Learning Naive Bayes
+105,Supervised Learning Neural Networks
+106,Supervised Learning Ensemble Methods
+107,Supervised Learning Feature Engineering
+108,Supervised Learning Model Evaluation
+109,Supervised Learning Hyperparameter Tuning
+110,Unsupervised Learning Clustering
+111,Unsupervised Learning Dimensionality Reduction
+112,Unsupervised Learning Anomaly Detection
+113,Unsupervised Learning Association Rules
+114,Unsupervised Learning Neural Networks
+115,Unsupervised Learning Feature Engineering
+116,Unsupervised Learning Model Evaluation
+117,Unsupervised Learning Hyperparameter Tuning
+118,Unsupervised Learning Autoencoders
+119,Unsupervised Learning Generative Adversarial Networks
+120,Data Visualization Tools
+121,Data Visualization Techniques
+122,Data Visualization Best Practices
+123,Data Visualization Dashboards
+124,Data Visualization Storytelling
+125,Data Visualization Design Principles
+126,Data Visualization Data Mapping
+127,Data Visualization Data Exploration
+128,Data Visualization Data Analysis
+129,Data Visualization Data Interpretation

lib.py

+import nltk
+nltk.download('wordnet')

requirements.txt

+matplotlib==3.7.1
+nltk==3.8.1
+numpy==1.23.5
+pandas==2.0.2
+scikit-learn==1.2.2
+seaborn==0.12.2
+joblib==1.2.0
+imutils==0.5.4
+Flask==2.3.2
+keras-ocr==0.8.9
+openai==0.27.8
+tensorflow==2.12.0
+seaborn==0.12.2
+wheel==0.40.0
+spellchecker==0.4
+yarl==1.9.2
\ No newline at end of file

templates/dashboard.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Add the Bootstrap CSS link here -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <!-- Add Font Awesome CSS link here -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard</title>
+    <style>
+        /* Additional CSS styles */
+        .navbar {
+            background-color: #333;
+        }
+        .navbar-nav .nav-link {
+            color: white;
+        }
+        .navbar-nav .nav-link:hover {
+            color: yellow;
+        }
+        .carousel-container {
+            background-color: #000; /* Set your desired background color */
+            overflow: hidden;
+        }
+        .carousel-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover; /* Ensure the image covers the entire slide */
+        }
+        .carousel {
+            width: 100%; /* Set carousel width to 100% */
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Navigation Bar -->
+    <nav class="navbar navbar-expand-lg navbar-dark">
+        <a class="navbar-brand" href="#">ER DIAGRAM TOOL</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
+            aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav mr-auto">
+                {% if user_role == 'student' %}
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('generate_er_diagram') }}"><i class="fas fa-database"></i> ER Diagram Generator</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('quiz') }}"><i class="fas fa-question-circle"></i> AI Based Quiz</a>
+                </li>
+                {% elif user_role == 'teacher' %}
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('generate_er_diagram') }}"><i class="fas fa-database"></i> ER Diagram Generator</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('extract') }}"><i class="fas fa-project-diagram"></i> ER Diagram Extractor</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('similarity') }}"><i class="fas fa-search"></i> Similarity Checker</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('quiz_count') }}"><i class="fas fa-search"></i> Quiz count</a>
+                </li>                
+                {% endif %}
+            </ul>
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('logout') }}"><i class="fas fa-sign-out-alt"></i> Logout {{user_role}}</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('home') }}"><i class="fas fa-home"></i> Home</a>
+                </li>
+                
+            </ul>
+        </div>
+    </nav>
+    
+
+    <!-- Content Area -->
+    <!--<div class="container">-->
+        <div id="carouselExample" class="carousel slide" data-ride="carousel">
+            <div class="carousel-inner">
+                <div class="carousel-item active">
+                    <img src="/static/diagram.webp" class="d-block w-100" alt="Slide 1">
+                </div>
+                <div class="carousel-item">
+                    <img src="/static/diagram2.webp" class="d-block w-100" alt="Slide 2">
+                </div>
+                <div class="carousel-item">
+                    <img src="/static/diagram3.webp" class="d-block w-100" alt="Slide 3">
+                </div>
+                <div class="carousel-item">
+                    <img src="/static/diagram4.webp" class="d-block w-100" alt="Slide 4">
+                </div>
+            </div>
+            <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="sr-only">Previous</span>
+            </a>
+            <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="sr-only">Next</span>
+            </a>
+        </div>
+    <!--</div>-->
+
+    <!-- Bootstrap JS, Popper.js, and jQuery scripts -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@2.9.1/dist/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</body>
+
+</html>

templates/home.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Add the Bootstrap CSS link here -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ER Diagram Tool</title>
+    <style>
+        /* Additional CSS styles */
+        body, html {
+            height: 100%;
+            background: url('/static/back.png') no-repeat center center fixed;
+            -webkit-background-size: cover;
+            -moz-background-size: cover;
+            -o-background-size: cover;
+            background-size: cover;
+        }
+        .container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+        }
+        .card {
+            width: fit-content;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="card">
+            <div class="card-body text-center">
+                <h1 class="card-title">WELCOME TO THE ER DIAGRAM TOOL</h1>
+                <p class="card-text">Please register or log in to use this tool.</p>
+                <a href="{{ url_for('login') }}" class="btn btn-primary btn-lg btn-block">Login</a>
+                <a href="{{ url_for('register') }}" class="btn btn-success btn-lg btn-block mt-3">Register</a>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

templates/login.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Add the Bootstrap CSS link here -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: url('/static/cover.png') no-repeat center center fixed;
+            -webkit-background-size: cover;
+            -moz-background-size: cover;
+            -o-background-size: cover;
+            background-size: cover;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        .card {
+            max-width: 400px;
+            width: 100%;
+        }
+
+        .card-body {
+            padding: 20px;
+        }
+
+        input[type="text"], input[type="password"] {
+            font-size: 16px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="card">
+        <div class="card-body text-center">
+            <h1 class="card-title">LOGIN PAGE</h1>
+
+            <form method="POST" action="">
+                {{ form.hidden_tag() }}
+                <div class="form-group">
+                    {{ form.username(class="form-control", placeholder="Username") }}
+                </div>
+                <div class="form-group">
+                    {{ form.password(class="form-control", placeholder="Password") }}
+                </div>
+                <button type="submit" class="btn btn-primary btn-block">Login</button>
+            </form>
+
+            <a href="{{ url_for('register') }}" class="mt-3">Don't have an account? Sign Up</a>
+            <div>
+                <a href="{{ url_for('home') }}">Back to Home</a>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

templates/quiz.html

+<html>
+<head>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+</head>
+<body>
+    {% block content %}
+    <div class="container mt-5">
+
+        {% if step == 'select_num_questions' %}
+        <div class="card">
+            <div class="card-body">
+                <h5 class="card-title">Quiz Selection</h5>
+                <form action="/quiz" method="post">
+                    <div class="form-group">
+                        <label for="num_questions">Select number of questions:</label>
+                        <select class="form-control" name="num_questions" id="num_questions">
+                            <option value="10">10</option>
+                            <option value="20">20</option>
+                            <option value="30">30</option>
+                        </select>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <button type="submit" class="btn btn-primary">Start Quiz</button></div>
+                        <div class="col-md-6">
+                            <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Back to Dashboard</a>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        {% elif step == 'answer' %}
+        <form action="/quiz" method="post">
+            <div class="card mb-4">
+                <div class="card-header bg-primary text-white">
+                    Answer the Questions
+                </div>
+                <div class="card-body bg-light">
+                    {% for question in questions %}
+                    <div class="row mb-3">
+                        <div class="col-md-8">
+                            <label>{{ loop.index }}. {{ question }}</label>
+                        </div>
+                        <div class="col-md-4">
+                            <input type="text" class="form-control" name="user_answer">
+                        </div>
+                    </div>
+                    {% endfor %}
+                    <div class="row">
+                        <div class="col-md-1">
+                            <button type="submit" class="btn btn-success">Submit</button>
+                        </div>
+                        <div class="col-md-2">
+                            <a href="{{ url_for('dashboard') }}" class="btn btn-secondary custom-btn">Back</a>
+                        </div>
+                    </div>  
+                </div>
+            </div>
+        </form>
+    
+
+        {% elif step == 'results' %}
+        <h2>Results</h2>
+        <div class="alert alert-info" role="alert">
+            Final Score: {{ correct_count }} out of {{ questions|length }}
+        </div>
+        {% for answer, similarity in zip(user_answers, similarity_scores_list) %}
+        <div class="card mb-3">
+            <div class="card-body">
+                <p><strong>Your Answer:</strong> {{ answer }}</p>
+                <p><strong>Similarity Score:</strong> {{ similarity }}</p>
+            </div>
+        </div>
+        {% endfor %}
+
+        <div>
+            <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Back to Dashboard</a>
+        </div>
+        {% if recommended_topics %}
+        <h2 class="mt-5">Recommended Topics</h2>
+        <ul class="list-group">
+            {% for topic in recommended_topics[:3] %}
+            <li class="list-group-item">{{ topic }}</li>
+            {% endfor %}
+        </ul>
+        {% endif %}
+        {% endif %} 
+
+    </div>
+    <div class="mt-5">
+        <br>
+    </div>
+
+    {% endblock %}
+</body>
+</html>
\ No newline at end of file

templates/quiz_count.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quiz Count</title>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <style>
+        .topic-item {
+            display: inline-block;
+            margin: 5px;
+            padding: 5px;
+            border: 1px solid #ccc;
+            cursor: pointer;
+        }
+    </style>
+
+</head>
+<body style="background-color: #f8f9fa;">
+    <div class="container mt-5">
+        <div class="row justify-content-center">
+            <div class="col-md-6">
+                <div class="card shadow-lg">
+                    <div class="card-body">
+                        <h5 class="card-title text-center text-primary">Quiz Configuration</h5>
+                        <hr>
+                        <form action="{{ url_for('quiz_count') }}" method="post">
+                            <div class="form-group">
+                                <label for="num_questions"><i class="fas fa-question-circle"></i> Number of Questions:</label>
+                                <select class="form-control" name="num_questions" id="num_questions">
+                                    <option value="10">10</option>
+                                    <option value="20">20</option>
+                                    <option value="30">30</option>
+                                </select>
+                            </div>
+
+                            <div class="form-group">
+                                <label for="topics"><i class="fas fa-book-open"></i> Topics:</label>
+                                <select class="form-control" name="topics" id="topics" multiple size="8">
+                                    <!-- topics will be populated by JavaScript -->
+                                </select>
+                            </div>
+
+                            <div class="selected-topics mb-3">
+                                <!-- To display the selected topics -->
+                            </div>
+
+                            <button type="submit" class="btn btn-primary btn-block">Set Number of Quiz and Topics</button>
+                        </form>
+
+                        {% if message %}
+                        <div class="alert alert-info mt-3">
+                            {{ message }}
+                        </div>
+                        {% endif %}                        
+
+                        <div class="text-center mt-3">
+                            <a href="{{ url_for('dashboard') }}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> Back to Home</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        $(document).ready(function() {
+            // Initialize topics
+            const topics = [
+                "Cloud Computing", "Cybersecurity", "Data Science", 
+                "Artificial Intelligence", "Machine Learning", "Software Development", 
+                "Probability", "Statistics", "Web Development", 
+                "Supervised Learning", "Unsupervised Learning", "Data Visualization"
+            ];
+            
+            // Populate dropdown with topics
+            topics.forEach(topic => {
+                $('#topics').append($('<option>', { value: topic, text: topic }));
+            });
+    
+            // When a topic is selected from the dropdown
+            $('#topics').change(function() {
+                let selectedTopic = $(this).val();
+                if (selectedTopic) {
+                    // Display it in the container
+                    let topicElem = $("<span class='topic-item'>" + selectedTopic + "</span>");
+                    $('.selected-topics').append(topicElem);
+                    // Remove the selected topic from the dropdown
+                    $(this).find('option:selected').remove();
+                }
+            });
+    
+            // When a displayed topic is clicked
+            $(document).on('click', '.topic-item', function() {
+                let topic = $(this).text();
+                // Add the topic back to the dropdown
+                $('#topics').append($('<option>', { value: topic, text: topic }));
+                // Remove the topic from the displayed list
+                $(this).remove();
+            });
+        });
+    </script>    
+</body>
+</html>
+    
\ No newline at end of file

templates/register.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Add the Bootstrap CSS link here -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register</title>
+
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: url('/static/cover.png') no-repeat center center fixed;
+            -webkit-background-size: cover;
+            -moz-background-size: cover;
+            -o-background-size: cover;
+            background-size: cover;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        .card {
+            max-width: 400px;
+            width: 100%;
+        }
+
+        .card-body {
+            padding: 20px;
+        }
+
+        input[type="text"], input[type="password"] {
+            font-size: 16px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="card">
+        <div class="card-body text-center">
+            <h1 class="card-title">REGISTER PAGE</h1>
+
+            <form method="POST" action="">
+                {{ form.hidden_tag() }}
+                <div class="form-group">
+                    {{ form.username(class="form-control", placeholder="Username") }}
+                </div>
+                <div class="form-group">
+                    {{ form.password(class="form-control", placeholder="Password") }}
+                </div>
+                <button type="submit" class="btn btn-success btn-block">Register</button>
+            </form>
+
+            <a href="{{ url_for('login') }}" class="mt-3">Already have an account? Log In</a>
+            <div>
+                <a href="{{ url_for('home') }}">Back to Home</a>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

users.csv

+id,username,password,role
+1,student,student,student
+2,teacher,teacher,teacher