diff --git a/.gitignore b/.gitignore
index dc92e65..2cbe518 100644
--- a/.gitignore
+++ b/.gitignore
@@ -149,4 +149,4 @@ cython_debug/
 #  and can be added to the global gitignore or merged into this file.  For a more nuclear
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 .idea/
-assignments
\ No newline at end of file
+scores.db
diff --git a/README.md b/README.md
index 86235ea..179a2f5 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,7 @@
  Customize, manage templates of rubrics and fast grade HTML/PDF files
 
 ![](https://shields.io/badge/dependencies-Python_3.11-blue)
+![](https://shields.io/badge/OS-Windows_Vista_+-green)
 
 ## Usage
 
@@ -20,8 +21,6 @@ It occupies localhost 5000 port by default.
 - [Customize host of Flask application](https://flask.palletsprojects.com/en/2.3.x/quickstart/)
 - [Customize port of Flask application](https://flask.palletsprojects.com/en/2.3.x/server/#address-already-in-use)
 
-Read the [operation manual](manual.md) to preview software functions.
-
 **Release:**
 
 1. Download and unzip the release.
diff --git a/app.py b/app.py
index bcf94b2..a9b7f6a 100644
--- a/app.py
+++ b/app.py
@@ -1,114 +1,122 @@
-import re
-import pandas as pd
-from flask import Flask, render_template, request, send_file, redirect
-import os
 import json
+import os
+import sqlite3
 import webbrowser
+import pandas as pd
+from flask import Flask, render_template, request, send_file, redirect
+from winapi import select_folder
 
-app = Flask(__name__)
-assignments = './assignments/'
-os.makedirs(assignments, exist_ok=True)
-supported_file_types = ('.htm', '.html', '.pdf', '.txt')
-
-
-@app.route('/', methods=['GET'])
-def index():  # put application's code here
-    existed_configs = [fn for fn in os.listdir(assignments) if os.path.splitext(fn)[1] == '.json']
-    return render_template('index.html', existed_configs=existed_configs)
 
+def write_sql(db_path, sql, *args):
+    c = sqlite3.connect(db_path)
+    r = c.cursor()
+    r.execute(sql, args)
+    r.close()
+    c.commit()
+    c.close()
 
-@app.route('/delete-config', methods=['GET'])
-def delete_config():
-    config_path = os.path.join(assignments, request.args.get('name', ''))
-    if os.path.isfile(config_path):
-        os.remove(config_path)
-    return redirect('/')
 
+def read_sql(db_path, sql, *args, one=False):
+    c = sqlite3.connect(db_path)
+    r = c.cursor()
+    r.execute(sql, args)
+    rst = r.fetchone() if one else r.fetchall()
+    r.close()
+    c.close()
+    return rst
 
-@app.route('/export-config', methods=['GET'])
-def export_config():
-    config_path = os.path.join(assignments, request.args.get('config', ''))
-    if os.path.isfile(config_path):
-        return send_file(config_path, as_attachment=True)
-    else:
-        return redirect('/')
 
+app = Flask(__name__)
+config_db = "scores.db"
+supported_file_types = ('.htm', '.html', '.pdf', '.txt')
 
-@app.route('/import-config', methods=['POST'])
-def import_config():
-    config = request.files['config']
-    json_name = config.filename
-    cand_saved_path = os.path.join(assignments, json_name)
-    if os.path.exists(cand_saved_path):
-        return 'Config file has already existed.'
-    config.save(cand_saved_path)
-    return redirect('/')
+if not os.path.exists(config_db):
+    with open("sql/initialize.sql", "r") as f:
+        commands = f.read().split(';')
+        for command in commands:
+            write_sql(config_db, command)
+with open("sql/check_files_scored.sql", "r") as f:
+    check_files_scored = f.read()
 
 
-def config_pull(config_name):
-    if not config_name:
-        return
-    config_path = os.path.join(assignments, config_name)
-    if not os.path.isfile(config_path):
-        return
-    with open(config_path, 'r') as f:
-        config = json.load(f)
-    return config
+@app.route('/', methods=['GET'])
+def index():
+    assignments = read_sql(config_db, "SELECT assignment_id, assignment_name FROM assignments")
+    return render_template('index.html', existed_configs=assignments)
 
 
-def config_push(config_name, config_content):
-    if not config_name:
-        return
-    config_path = os.path.join(assignments, config_name)
-    with open(config_path, 'w') as f:
-        json.dump(config_content, f, indent=4)
+@app.route('/delete-config', methods=['GET'])
+def delete_config():
+    agn_id = request.args.get('id')
+    if agn_id:
+        write_sql(config_db, "DELETE FROM assignments WHERE assignment_id = ?", agn_id)
+        write_sql(config_db, "DELETE FROM files WHERE assignment_id = ?", agn_id)
+        write_sql(config_db, "DELETE FROM rubric WHERE assignment_id = ?", agn_id)
+        write_sql(config_db, "DELETE FROM scores WHERE assignment_id = ?", agn_id)
+    return redirect('/')
 
 
 @app.route('/config-add', methods=['POST'])
 def config_add():
     name = request.form.get('name')
     if not name:
-        return 'Name is empty.'
-    json_name = re.sub(r'\s', '_', name).lower() + '.json'
-    cand_saved_path = os.path.join(assignments, json_name)
-    if os.path.exists(cand_saved_path):
-        return 'Config file has already existed.'
-    config = {'base_dir': '', 'name': name, 'rubric': [], 'scores': {}, 'notes': {},
-              'id': 0, 'filenames': []}
-    config_push(json_name, config)
-    return redirect('/')
-
-
-@app.route('/config-check-name', methods=['POST'])
-def config_check_name():
-    config_name = request.form.get('config_name')
-    config = config_pull(config_name)
-    if not config:
-        return 'Config doesn\'t exist.'
+        return 'Assignment name is empty.'
+    n_existed = read_sql(config_db, "SELECT count(*) FROM assignments WHERE assignment_name = ?", name, one=True)
+    n_existed = n_existed[0]
+    if n_existed == 0:
+        write_sql(config_db, "INSERT INTO assignments (assignment_name) VALUES (?)", name)
+    agn_id = read_sql(config_db, "SELECT assignment_id FROM assignments WHERE assignment_name = ?", name, one=True)
+    agn_id = agn_id[0]
     base_dir = request.form.get('base_dir')
     if not (base_dir and os.path.isdir(base_dir)):
-        return 'The base directory does not exist.'
-    config['base_dir'] = base_dir
-    assignment_file_names = [fn for fn in os.listdir(base_dir) if os.path.splitext(fn)[1] in supported_file_types]
-    if not assignment_file_names:
-        return f'The base directory is empty. Supported file types {supported_file_types}.'
-    config["filenames"] = assignment_file_names
-    rebuild = request.form.get('rebuild')
-    if rebuild:
-        config['scores'] = {}
-        config['notes'] = {}
-    config_push(config_name, config)
+        return 'The base directory doesn\'t exist.'
+    for fn in os.listdir(base_dir):
+        display_name, ext_name = os.path.splitext(fn)
+        if ext_name in supported_file_types:
+            write_sql(config_db, "INSERT INTO files (file_name, display_name, assignment_id) VALUES (?, ?, ?)",
+                      fn, display_name, agn_id)
+    pointer = read_sql(config_db, "SELECT min(file_id) FROM files WHERE assignment_id = ?", agn_id, one=True)
+    pointer = pointer[0]
+    if pointer:
+        write_sql(config_db, "UPDATE assignments SET base_dir = ?, file_id_pointer = ? WHERE assignment_id = ?",
+                  base_dir, pointer, agn_id)
+    else:
+        return f'The base directory is empty. Supported file types: {supported_file_types}.'
     return redirect('/')
 
 
-@app.route('/config-rubric', methods=['POST'])
-def config_rubric():
-    config_name = request.form.get('config_name')
-    config = config_pull(config_name)
-    if not config:
-        return 'Config doesn\'t exist.'
+@app.route('/select-base-directory', methods=['GET'])
+def select_base_directory():
+    base_dir = select_folder()
+    if base_dir:
+        return {'error': 0, 'base_dir': base_dir, 'message': ''}
+    else:
+        return {'error': 1, 'base_dir': '', 'message': 'Selected base directory doesn\'t exist.'}
+
+
+@app.route('/rubric', methods=['GET'])
+def rubric():
+    agn_id = request.args.get('id')
+    agn_name = read_sql(config_db, "SELECT assignment_name FROM assignments WHERE assignment_id = ?", agn_id, one=True)
+    if not agn_name:
+        return 'Assignment doesn\'t exist.'
+    agn_name = agn_name[0]
+    rubric_json = read_sql(config_db, "SELECT rubric_json FROM rubric WHERE assignment_id = ?", agn_id, one=True)
+    if rubric_json:
+        rubric_json = json.loads(rubric_json[0])
+    else:
+        rubric_json = []
+    return render_template(
+        'rubric.html', rubric=rubric_json, display_name=agn_name,
+        agn_id=agn_id,
+    )
+
+
+@app.route('/rubric-edit', methods=['POST'])
+def rubric_edit():
+    agn_id = request.form.get('agn_id')
+    rubric_json = []
     try:
-        config['rubric'] = []
         for caption in request.form.keys():
             if caption.startswith('caption-'):
                 q_id = caption.removeprefix('caption-')
@@ -126,156 +134,173 @@ def config_rubric():
                         }
                         question['assessment'].append(level)
                 question['assessment'] = sorted(question['assessment'], key=lambda lv: lv['score'], reverse=True)
-                config['rubric'].append(question)
+                rubric_json.append(question)
     except (KeyError, ValueError, TypeError):
         return 'Submitted data is invalid.'
-    config_push(config_name, config)
+    rubric_json = json.dumps(rubric_json)
+    existed = read_sql(config_db, "SELECT * FROM rubric WHERE assignment_id = ?", agn_id)
+    if existed:
+        write_sql(config_db, "UPDATE rubric SET rubric_json = ? WHERE assignment_id = ?", rubric_json, agn_id)
+    else:
+        write_sql(config_db, "INSERT INTO rubric (assignment_id, rubric_json) VALUES (?, ?)", agn_id, rubric_json)
     return redirect('/')
 
 
-@app.route('/config-fork', methods=['GET'])
-def config_fork():
-    config_name = request.args.get('config')
-    config = config_pull(config_name)
-    if not config:
-        return 'Config file does not exist.'
-    return render_template(
-        'config.html', rubric=config.get('rubric'), display_name=config.get('name'),
-        config_name=config_name,
-    )
-
-
 @app.route('/grade', methods=['GET'])
 def grade():
-    config_name = request.args.get('config')
-    config = config_pull(config_name)
-    if not config:
-        return 'Config file does not exist.'
-    id_ = config.get('id')
-    filenames = config.get('filenames')
-    n = len(filenames)
+    agn_id = request.args.get('id')
     try:
-        scores = config['scores']
-        filelist = [(filenames[i], str(i) in scores.keys()) for i in range(n)]
-        id_str = str(id_)
-        if id_str in scores.keys():
-            raw_scores = config['scores'][id_str]
-            questions = config['rubric']
-            scores = []
-            for s, q in zip(raw_scores, questions):
-                levels = [m['score'] for m in q['assessment']]
-                scores.append((s, s in levels))
-        else:
-            scores = []
-        note = config['notes'].get(id_str, '')
-    except KeyError:
-        return 'Config file is invalid.'
+        title, file_id, base_dir = read_sql(
+            config_db, "SELECT assignment_name, file_id_pointer, base_dir FROM assignments WHERE assignment_id = ?",
+            agn_id, one=True
+        )
+    except TypeError:
+        return 'Assignment doesn\'t exist.'
+    filelist = read_sql(config_db, check_files_scored, agn_id)
+    if not filelist:
+        return 'Base directory is empty.'
+    max_file_id = max(x[0] for x in filelist)
+    rubric_ = read_sql(config_db, "SELECT rubric_json FROM rubric WHERE assignment_id = ?", agn_id, one=True)
+    if rubric_:
+        rubric_ = json.loads(rubric_[0])
+    else:
+        rubric_ = []
+    score_comment = read_sql(config_db,
+                             "SELECT score_list, comment FROM scores WHERE assignment_id = ? AND file_id = ?",
+                             agn_id, file_id, one=True)
+    if score_comment:
+        raw_score, comment = json.loads(score_comment[0]), score_comment[1]
+        score = []
+        for s, q in zip(raw_score, rubric_):
+            levels = [m['score'] for m in q['assessment']]
+            score.append((s, s in levels))
+    else:
+        score, comment = [], ''
     return render_template(
-        'grade.html',
-        title=config.get('name'), id=id_, config=config_name, rubric=config.get('rubric'),
-        current_score=scores, filelist=filelist, note=note,
+        'grade.html', title=title, file_id=file_id, filelist=filelist,
+        rubric=rubric_, agn_id=agn_id, current_score=score, note=comment, n=max_file_id,
     )
 
 
 @app.route('/grade-file', methods=['GET'])
-def grade_file():
-    config_name = request.args.get('config')
-    config = config_pull(config_name)
-    if not config:
-        return 'Config file does not exist.'
-    filenames = config.get('filenames')
-    base_dir = config.get('base_dir')
-    id_ = config.get('id')
+def view_file():
+    file_id = request.args.get('file_id')
+    agn_id = request.args.get('assignment_id')
     try:
-        current_file = filenames[id_]
-        current_file = os.path.abspath(os.path.join(base_dir, current_file))
-    except (TypeError, IndexError):
-        return 'File does not exist.'
-    if os.path.isfile(current_file):
-        return send_file(current_file)
-    else:
+        base_dir, file_name = read_sql(config_db, "SELECT base_dir, file_name FROM assignments a JOIN files f "
+                                                  "ON a.assignment_id = f.assignment_id WHERE file_id = ? AND "
+                                                  "a.assignment_id = ?", file_id, agn_id, one=True)
+        file_path = os.path.abspath(os.path.join(base_dir, file_name))
+        assert os.path.isfile(file_path)
+    except (TypeError, AssertionError):
         return 'File does not exist.'
+    return send_file(file_path)
 
 
 @app.route('/grade-jump', methods=['POST'])
 def grade_jump():
-    config_name = request.form.get('config')
-    config = config_pull(config_name)
-    if not config:
-        return 'Config file does not exist.'
+    agn_id = request.form.get('agn_id')
+    file_id = request.form.get('file_id')
+    files = read_sql(config_db, "SELECT file_id FROM files WHERE assignment_id = ?", agn_id)
+    files = [x[0] for x in files]
     try:
-        config['id'] = int(request.form.get('id'))
-    except (TypeError, ValueError):
-        return 'Submitted data is invalid.'
-    config_push(config_name, config)
-    return redirect('/grade?config=' + config_name)
+        file_id = int(file_id)
+    except TypeError:
+        return 'Do not customize POST information. (File ID is not an integer.)'
+    if file_id not in files:
+        return 'File doesn\'t exist.'
+    write_sql(config_db, "UPDATE assignments SET file_id_pointer = ? WHERE assignment_id = ?",
+              file_id, agn_id)
+    return redirect(f'/grade?id={agn_id}')
 
 
 @app.route('/grade-update', methods=['POST'])
 def grade_submit():
-    config_name = request.form.get('config')
-    config = config_pull(config_name)
-    if not config:
-        return 'Config file does not exist.'
-    id_str = request.form.get('student-id')
+    agn_id = read_sql(
+        config_db, "SELECT assignment_id FROM assignments WHERE assignment_id = ?",
+        request.form.get('agn_id'), one=True
+    )
+    if not agn_id:
+        return 'Assignment doesn\'t exist.'
+    agn_id = agn_id[0]
+    file_id = read_sql(
+        config_db, "SELECT file_id FROM files WHERE file_id = ?",
+        request.form.get('student_id'), one=True
+    )
+    if not file_id:
+        return 'File doesn\'t exist.'
+    file_id = file_id[0]
     action = request.form.get('action')
+    if action == 'Save and continue':
+        next_file_id = read_sql(config_db, "SELECT min(file_id) FROM files WHERE assignment_id = ? AND file_id > ?",
+                                agn_id, file_id, one=True)
+        if next_file_id:
+            write_sql(config_db, "UPDATE assignments SET file_id_pointer = ? WHERE assignment_id = ?",
+                      next_file_id[0], agn_id)
+    config = read_sql(config_db, 'SELECT rubric_json FROM rubric WHERE assignment_id = ?', agn_id, one=True)
     try:
-        id_ = int(id_str)
-        if action == 'Save and continue':
-            config['id'] = id_ + 1
-        config['scores'][id_str] = []
-        for q in config['rubric']:
+        config = json.loads(config[0])
+        score = []
+        for q in config:
             raw_score = request.form.get(q['q_id'])
             if raw_score == 'c':  # customized
-                score = float(request.form.get(q['q_id'] + '-c'))
+                s = float(request.form.get(q['q_id'] + '-c'))
             else:
-                score = float(raw_score)
-            config['scores'][id_str].append(score)
-        note = request.form.get('note')
-        if note:
-            config['notes'][id_str] = note
+                s = float(raw_score)
+            score.append(s)
+        comment = request.form.get('note')
+        n_existed = read_sql(config_db, "SELECT count(*) FROM scores WHERE assignment_id = ? AND file_id = ?",
+                             agn_id, file_id, one=True)
+        n_existed = n_existed[0]
+        if n_existed == 0:
+            write_sql(config_db, "INSERT INTO scores (assignment_id, file_id, score_list, comment) VALUES (?, ?, ?, ?)",
+                      agn_id, file_id, json.dumps(score), comment)
+        else:
+            write_sql(config_db, "UPDATE scores SET score_list = ?, comment = ? WHERE assignment_id = ? AND file_id = ?",
+                      json.dumps(score), comment, agn_id, file_id)
     except (TypeError, ValueError, KeyError):
         return 'Submitted data is invalid.'
-    config_push(config_name, config)
-    return redirect('/grade?config=' + config_name)
+    return redirect(f'/grade?id={agn_id}')
 
 
 @app.route('/analyze', methods=['GET'])
 def analyze():
-    config_name = request.args.get('config')
-    config = config_pull(config_name)
-    if not config:
-        return 'Config file does not exist.'
-    columns = [q.get('caption', 'No caption') for q in config.get('rubric', [])]
-    try:
-        filenames, _ = zip(*map(os.path.splitext, config.get('filenames')))
-    except ValueError:
-        return 'The directory is empty.'
-    scores = pd.DataFrame(index=filenames, columns=columns)
-    notes = pd.DataFrame(index=filenames, columns=['Note'])
-    for k, v in config.get('scores', {}).items():
-        try:
-            row_id = int(k) % len(filenames)
-        except ValueError:
-            continue
-        scores.iloc[row_id, :] = v
-    for k, v in config.get('notes', {}).items():
-        try:
-            row_id = int(k) % len(filenames)
-        except ValueError:
-            continue
-        notes['Note'][row_id] = v
+    agn_id = request.args.get('id')
+    assignment_name = read_sql(config_db, "SELECT assignment_name FROM assignments WHERE assignment_id = ?",
+                               agn_id, one=True)
+    if not assignment_name:
+        return 'Assignment doesn\'t exist.'
+    assignment_name = assignment_name[0]
+    rubric_ = read_sql(config_db, "SELECT rubric_json FROM rubric WHERE assignment_id = ?", agn_id, one=True)
+    if not rubric_:
+        return 'Rubric doesn\'t exist.'
+    rubric_ = json.loads(rubric_[0])
+    questions = [q.get('caption', 'No caption') for q in rubric_]
+
+    c = sqlite3.connect(config_db)
+    raw_scores = pd.read_sql(con=c, sql="SELECT display_name, score_list, comment FROM files JOIN scores "
+                                        "ON files.file_id = scores.file_id")
+    c.close()
+    scores = pd.DataFrame(
+        data=raw_scores['score_list'].apply(json.loads).tolist(),
+        columns=questions
+    )
+    scores.index = raw_scores['display_name']
+    notes = raw_scores[['comment']].copy()
+    notes.index = raw_scores['display_name']
+    notes.replace('', pd.NA, inplace=True)
+    notes.dropna(inplace=True)
     return render_template(
         'analyze.html',
-        caption=config.get('name'),
+        caption=assignment_name,
         scores=scores.to_html(
             classes='table table-bordered table-striped',
-            float_format=lambda f: format(f, 'g'),
-            na_rep='',
+            float_format=lambda g: format(g, 'g'),
+            na_rep='', index_names=False,
         ),
         notes=notes.to_html(
             classes='table table-bordered table-striped',
-            na_rep='',
+            index_names=False,
         ),
     )
 
diff --git a/app.spec b/app.spec
index 4a5be9e..d4519f4 100644
--- a/app.spec
+++ b/app.spec
@@ -7,7 +7,7 @@ block_cipher = None
 a = Analysis(
     ['app.py'],
     pathex=[],
-    binaries=[('templates', 'templates')],
+    binaries=[('templates', 'templates'), ('sql', 'sql')],
     datas=[],
     hiddenimports=[],
     hookspath=[],
diff --git a/assets/image-20230531164128264.png b/assets/image-20230531164128264.png
deleted file mode 100644
index 2c11e68..0000000
Binary files a/assets/image-20230531164128264.png and /dev/null differ
diff --git a/assets/image-20230531164353459.png b/assets/image-20230531164353459.png
deleted file mode 100644
index 84ae229..0000000
Binary files a/assets/image-20230531164353459.png and /dev/null differ
diff --git a/assets/image-20230531165522028.png b/assets/image-20230531165522028.png
deleted file mode 100644
index 8f75519..0000000
Binary files a/assets/image-20230531165522028.png and /dev/null differ
diff --git a/assets/image-20230531165703612.png b/assets/image-20230531165703612.png
deleted file mode 100644
index 52457c1..0000000
Binary files a/assets/image-20230531165703612.png and /dev/null differ
diff --git a/assets/image-20230531165843515.png b/assets/image-20230531165843515.png
deleted file mode 100644
index d8cd8c2..0000000
Binary files a/assets/image-20230531165843515.png and /dev/null differ
diff --git a/assets/image-20230531170025106.png b/assets/image-20230531170025106.png
deleted file mode 100644
index 2ce33e5..0000000
Binary files a/assets/image-20230531170025106.png and /dev/null differ
diff --git a/assets/image-20230531170205660.png b/assets/image-20230531170205660.png
deleted file mode 100644
index 9b9b84b..0000000
Binary files a/assets/image-20230531170205660.png and /dev/null differ
diff --git a/assets/image-20230531170448762.png b/assets/image-20230531170448762.png
deleted file mode 100644
index 5f9d75e..0000000
Binary files a/assets/image-20230531170448762.png and /dev/null differ
diff --git a/assets/image-20230531170755053.png b/assets/image-20230531170755053.png
deleted file mode 100644
index 88acdde..0000000
Binary files a/assets/image-20230531170755053.png and /dev/null differ
diff --git a/assignments/qun_ml_presentation.json b/assignments/qun_ml_presentation.json
deleted file mode 100644
index 2fbffa9..0000000
--- a/assignments/qun_ml_presentation.json
+++ /dev/null
@@ -1,100 +0,0 @@
-{
-    "base_dir": "C:\\Users\\cloudy\\DataGripProjects\\QUN-ML-Scores\\presentation",
-    "name": "QUN ML Presentation",
-    "rubric": [
-        {
-            "q_id": "1",
-            "caption": "\u95ee\u9898\u5b9a\u4e49",
-            "assessment": [
-                {
-                    "score": 5.0,
-                    "definition": "\u8868\u8ff0\u4e86\u5bf9\u95ee\u9898\u7684\u7406\u89e3\uff0c\u5728\u9898\u76ee\u5185\u5bb9\u7684\u57fa\u7840\u4e0a\u4f5c\u51fa\u5ef6\u62d3\uff0c\u8865\u5145\u4e86\u5fc5\u8981\u7684\u6570\u636e\uff0c\u4f5c\u51fa\u5efa\u6a21\u5047\u8bbe\u3002"
-                },
-                {
-                    "score": 3.0,
-                    "definition": "\u8868\u8ff0\u4e86\u5bf9\u95ee\u9898\u7684\u7406\u89e3\uff0c\u5728\u9898\u76ee\u5185\u5bb9\u7684\u57fa\u7840\u4e0a\u4f5c\u51fa\u5ef6\u62d3\uff0c\u4f46\u7f3a\u5c11\u6570\u636e\u6216\u5efa\u6a21\u5047\u8bbe\u3002"
-                },
-                {
-                    "score": 0.0,
-                    "definition": "\u7b80\u5355\u91cd\u590d\u9898\u76ee\u5185\u5bb9\uff0c\u6ca1\u6709\u8868\u8fbe\u5efa\u6a21\u7406\u89e3\u3002"
-                }
-            ]
-        },
-        {
-            "q_id": "2",
-            "caption": "\u7406\u8bba\u65b9\u6cd5",
-            "assessment": [
-                {
-                    "score": 10.0,
-                    "definition": "\u80fd\u591f\u6839\u636e\u95ee\u9898\u7279\u5f81\uff0c\u79d1\u5b66\u5730\u9009\u62e9\u7406\u8bba\u65b9\u6cd5\uff0c\u5e76\u5f62\u6210\u89e3\u51b3\u95ee\u9898\u7684\u5b8c\u6574\u903b\u8f91\uff0c\u8868\u8fbe\u4e86\u81ea\u5df1\u7684\u5b66\u672f\u7406\u89e3\u3002"
-                },
-                {
-                    "score": 6.0,
-                    "definition": "\u80fd\u591f\u5e94\u7528\u4e00\u4e9b\u65b9\u6cd5\u5206\u6790\u95ee\u9898\uff0c\u4f46\u6ca1\u6709\u5f62\u6210\u89e3\u51b3\u95ee\u9898\u7684\u5b8c\u6574\u903b\u8f91\u3002"
-                },
-                {
-                    "score": 2.0,
-                    "definition": "\u5217\u4e3e\u7406\u8bba\u77e5\u8bc6\uff0c\u4e0d\u80fd\u4f53\u73b0\u7406\u89e3\u4e0e\u5e94\u7528\u3002"
-                }
-            ]
-        },
-        {
-            "q_id": "3",
-            "caption": "\u8ba8\u8bba",
-            "assessment": [
-                {
-                    "score": 5.0,
-                    "definition": "\u8ba8\u8bba\u4e86\u6240\u7528\u65b9\u6cd5\u7684\u95ee\u9898\u4e0e\u5c40\u9650\u6027\uff0c\u5e76\u63d0\u51fa\u53ef\u80fd\u7684\u6539\u8fdb\u65b9\u5411\uff0c\u6216\u6b63\u786e\u8bf4\u660e\u4e86\u65e0\u6cd5\u6539\u8fdb\u7684\u539f\u56e0\u3002"
-                },
-                {
-                    "score": 3.0,
-                    "definition": "\u8ba8\u8bba\u4e86\u6240\u7528\u65b9\u6cd5\u7684\u95ee\u9898\u4e0e\u5c40\u9650\u6027\uff0c\u4f46\u6ca1\u6709\u4f5c\u51fa\u8bc1\u660e\u6216\u5c55\u793a\u5f97\u51fa\u7ed3\u8bba\u7684\u4f9d\u636e\u3002"
-                },
-                {
-                    "score": 0.0,
-                    "definition": "\u6ca1\u6709\u5206\u6790\u6240\u7528\u65b9\u6cd5\u7684\u95ee\u9898\u4e0e\u5c40\u9650\u6027\u3002"
-                }
-            ]
-        },
-        {
-            "q_id": "4",
-            "caption": "\u5e94\u7528\u5b9e\u4f8b",
-            "assessment": [
-                {
-                    "score": 10.0,
-                    "definition": "\u5c55\u793a\u4e86\u6bcf\u4e2a\u95ee\u9898\u7684\u5efa\u6a21\u7ed3\u679c\uff0c\u4f7f\u7528\u7f8e\u89c2\u3001\u6b63\u786e\u7684\u56fe\u8868\u5c55\u793a\u6570\u636e\uff0c\u4f7f\u7528\u4e86\u5408\u9002\u7684\u6a21\u578b\u8bc4\u4ef7\u65b9\u6cd5\uff0c\u5f97\u51fa\u6709\u610f\u4e49\u7684\u7ed3\u8bba\u3002"
-                },
-                {
-                    "score": 6.0,
-                    "definition": "\u5c55\u793a\u4e86\u6bcf\u4e2a\u95ee\u9898\u7684\u5efa\u6a21\u7ed3\u679c\uff0c\u4f7f\u7528\u56fe\u8868\u5c55\u793a\u6570\u636e\uff0c\u4f46\u6570\u636e\u53ef\u89c6\u5316\u7684\u65b9\u6cd5\u6709\u6b20\u7f3a\uff0c\u6216\u7f3a\u5c11\u6a21\u578b\u8bc4\u4ef7\u3002"
-                },
-                {
-                    "score": 2.0,
-                    "definition": "\u5efa\u6a21\u7ed3\u679c\u4e0d\u5b8c\u6574\uff0c\u6216\u903b\u8f91\u51cc\u4e71\u3002"
-                }
-            ]
-        }
-    ],
-    "scores": {
-        "0": [
-            5.0,
-            10.0,
-            5.0,
-            10.0
-        ]
-    },
-    "notes": {},
-    "id": 0,
-    "filenames": [
-        "2022360482.pdf",
-        "2022360501.pdf",
-        "2022360512.pdf",
-        "2022360522.pdf",
-        "2022360524.pdf",
-        "2022360533.pdf",
-        "2022360548.pdf",
-        "2022360558.pdf",
-        "2022360577.pdf",
-        "2022360581.pdf"
-    ]
-}
\ No newline at end of file
diff --git a/sql/check_files_scored.sql b/sql/check_files_scored.sql
new file mode 100644
index 0000000..bf5c8e3
--- /dev/null
+++ b/sql/check_files_scored.sql
@@ -0,0 +1,4 @@
+select files.file_id, display_name, score_list is not null
+from files left join scores
+on files.file_id = scores.file_id and files.assignment_id = scores.assignment_id
+where files.assignment_id = ?
\ No newline at end of file
diff --git a/sql/initialize.sql b/sql/initialize.sql
new file mode 100644
index 0000000..df00897
--- /dev/null
+++ b/sql/initialize.sql
@@ -0,0 +1,31 @@
+create table assignments
+(
+    assignment_id   integer
+        primary key autoincrement,
+    assignment_name text,
+    base_dir        text,
+    file_id_pointer integer
+);
+
+create table files
+(
+    file_id       integer
+        primary key autoincrement,
+    file_name     text,
+    display_name  text,
+    assignment_id integer
+);
+
+create table rubric
+(
+    assignment_id integer,
+    rubric_json   text
+);
+
+create table scores
+(
+    assignment_id integer,
+    file_id       integer,
+    score_list    text,
+    comment       text
+);
\ No newline at end of file
diff --git a/templates/analyze.html b/templates/analyze.html
index c370005..9336cc5 100644
--- a/templates/analyze.html
+++ b/templates/analyze.html
@@ -10,11 +10,11 @@
 <body class="container-md">
     <div class="row alert justify-content-center">
         <div class="col-md-12">
-            <p class="text-center fw-bold">{{ caption }}</p>
+            <h5 class="text-center card-title">{{ caption }}</h5>
             <p><a href="/" style="text-decoration: none">Back</a></p>
             <p class="fw-bold">Scores</p>
             {{ scores | safe }}
-            <p class="fw-bold">Notes</p>
+            <p class="fw-bold">Comments</p>
             {{ notes | safe }}
         </div>
     </div>
diff --git a/templates/grade.html b/templates/grade.html
index 1557a7d..04d31d1 100644
--- a/templates/grade.html
+++ b/templates/grade.html
@@ -1,175 +1,140 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Metadata -->
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <!-- Bootstrap -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+                integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+                    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+                    crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
     <title>Homework Grader</title>
-    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Left-side bar style -->
     <style>
-        .btn-bd-primary {
-            --bs-btn-font-weight: 600;
-            --bs-btn-color: #20254c;
-            --bs-btn-bg: #ecedea;
-            --bs-btn-hover-bg: #9eb2d2;
-            --bs-btn-active-bg: #424d89;
-            --bs-btn-border-color: var(--bs-btn-bg);
-            --bs-btn-hover-color: var(--bs-btn-color);
-            --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
-            --bs-btn-focus-shadow-rgb: var(--bs-btn-bg);
-            --bs-btn-active-color: var(--bs-btn-hover-color);
-            --bs-btn-active-border-color: var(--bs-btn-active-bg);
-        }
+        body{min-height:100vh;min-height:-webkit-fill-available}html{height:-webkit-fill-available}main{display:flex;
+        flex-wrap:nowrap;height:100vh;height:-webkit-fill-available;max-height:100vh;overflow-x:auto;overflow-y:hidden}
+        .b-example-divider{flex-shrink:0;width:1.5rem;height:100vh;background-color:rgba(0,0,0,.1);border:solid
+        rgba(0,0,0,.15);border-width:1px 0;box-shadow:inset 0 .5em 1.5em rgba(0,0,0,.1),inset 0 .125em .5em
+        rgba(0,0,0,.15)}.bi{vertical-align:-.125em;pointer-events:none;fill:currentColor}.dropdown-toggle{outline:0}
+        .nav-flush .nav-link{border-radius:0}.btn-toggle{display:inline-flex;align-items:center;padding:.25rem .5rem;
+        font-weight:600;color:rgba(0,0,0,.65);background-color:transparent;border:0}.btn-toggle:focus,
+        .btn-toggle:hover{background-color:#eeeeee}.btn-toggle::before{width:1.25em;line-height:0;
+        content:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+        transition:transform .35s ease;transform-origin:.5em 50%}.btn-toggle[aria-expanded=true]{color:rgba(0,0,0,.85)}
+        .btn-toggle[aria-expanded=true]::before{transform:rotate(90deg)}.btn-toggle-nav a{display:inline-flex;
+        padding:.1875rem .5rem;margin-top:.125rem;margin-left:1.25rem;text-decoration:none}.btn-toggle-nav a:focus,
+        .btn-toggle-nav a:hover{background-color:#eeeeee}.scrollarea{overflow-y:auto}.fw-semibold{font-weight:600}
+        .lh-tight{line-height:1.25}
+        a {text-decoration: none; color: var(--bs-dark);}
+        a:not([href]):not([class]) {color: var(--bs-gray-500);}
+        a:not([href]):not([class]):hover {color: var(--bs-gray-500);}
     </style>
 </head>
 <body>
-
-<div class="d-flex" style="width: 100%;">
-    <div class="d-flex flex-column float-start" style="height: 100vh; overflow-y: auto;">
-        <button class="btn btn-bd-primary m-2"
-                type="button" data-bs-toggle="offcanvas" data-bs-target="#table-of-content" aria-controls="table-of-content"
-                aria-label="Toggle navigation">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
-              <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75
-              2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0
-              0 .196-.12l6.813-6.814z"/>
-              <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1
-              0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
-            </svg>
-        </button>
-        <button type="button" class="btn btn-bd-primary m-2" data-bs-toggle="modal" data-bs-target="#student-link">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
-                <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002
-                1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
-                <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83
-                2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
-            </svg>
-        </button>
-        <button onclick="window.location.href = '/'" class="btn btn-bd-primary m-2">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-backspace" viewBox="0 0 16 16">
-                <path d="M5.83 5.146a.5.5 0 0 0 0 .708L7.975 8l-2.147 2.146a.5.5 0 0 0 .707.708l2.147-2.147 2.146
-                2.147a.5.5 0 0 0 .707-.708L9.39 8l2.146-2.146a.5.5 0 0 0-.707-.708L8.683 7.293 6.536 5.146a.5.5 0 0 0-.707 0z"/>
-                <path d="M13.683 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-7.08a2 2 0 0 1-1.519-.698L.241 8.65a1 1 0 0 1
-                0-1.302L5.084 1.7A2 2 0 0 1 6.603 1h7.08zm-7.08 1a1 1 0 0 0-.76.35L1 8l4.844 5.65a1 1 0 0 0
-                .759.35h7.08a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-7.08z"/>
-            </svg>
-        </button>
-    </div>
-
-    <iframe id="article" class="flex-fill" style="height: 100vh;"
-            src="/grade-file?id={{ id }}&config={{ config }}">
-    </iframe>
-</div>
-
-<div class="offcanvas offcanvas-start d-flex flex-column justify-content-between"
-     tabindex="-1" id="table-of-content" aria-labelledby="table-of-content-label">
-    <div class="offcanvas-header">
-        <h5 class="offcanvas-title" id="table-of-content-label">{{ title }}</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-    </div>
-    <div class="offcanvas-body flex-fill">
-        <form action="/grade-jump" method="post" class="d-flex">
-            <select class="form-select my-2" name="id" required>
-                {% for file_score in filelist %}
-                    <option value="{{ loop.index0 }}"
-                            {% if loop.index0 == id %}selected style="font-weight: bold" {% endif %}
-                            class="{% if file_score.1 %}text-success{% else %}text-danger{% endif %}"
-                            >
-                    {{ file_score.0 }}
-                    </option>
-                {% endfor %}
-            </select>
-            <input name="config" value="{{ config }}" type="hidden">
-            <input type="submit" class="btn btn-bd-primary m-2" value="Goto" />
-        </form>
-    <hr>
-        <form action="/grade-update" method="post">
-            <input name="config" value="{{ config }}" type="hidden">
-            <input name="student-id" value="{{ id }}" type="hidden">
-            {% for question in rubric %}
-                {% set q = loop.index0 %}
-                {% set q_id = question.q_id %}
-                <p><b>{{ question.caption }}</b></p>
-                <div class="d-flex flex-gap-1">
-                    {% if current_score %}
-                        {% if current_score[q].1 %}
-                            <select class="form-select my-2" name="{{ q_id }}" required>
-                                {% for level in question.assessment %}
-                                    <option value="{{ level.score }}"
-                                            {% if current_score[q].0 == level.score %} selected {% endif %}>
-                                        {{ level.score }}
-                                    </option>
-                                {% endfor %}
-                                <option value="c">customized:</option>
-                            </select>
-                            <input class="form-control m-2" type="number" name="{{ q_id }}-c" step="0.01" />
-                        {% else %}
-                            <select class="form-select my-2" name="{{ q_id }}" required>
-                                {% for level in question.assessment %}
-                                    <option value="{{ level.score }}">{{ level.score }}</option>
-                                {% endfor %}
-                                <option value="c" selected>customized:</option>
-                            </select>
-                            <input class="form-control m-2" type="number" name="{{ q_id }}-c" step="0.01"
-                                   value="{{ current_score[q].0 }}" />
-                        {% endif %}
-                    {% else %}
-                        <select class="form-select my-2" name="{{ q_id }}" required>
+<div class="container-fluid" style="background-color: #f9f9f9">
+    <div class="row">
+        <div class="col-md-3 p-3 d-flex flex-column" style="height: 100vh;">
+            <h5 class="card-title" id="table-of-content-label">{{ title }}</h5>
+            <div class="navbar-nav flex-grow-1" style="overflow-y: auto;">
+                <ul class="nav gap-2">
+                    <li class="nav-item">
+                        <a class="nav-link" href="/">Back</a>
+                    </li>
+                </ul>
+                <form action="/grade-jump" method="post" class="d-flex">
+                    <select class="form-select my-2" name="file_id" required>
+                        {% for file_id_1, file_name, file_scored in filelist %}
+                            <option value="{{ file_id_1 }}"
+                                    {% if file_id_1 == file_id %}selected style="font-weight: bold" {% endif %}
+                                    class="{% if file_scored %}text-success{% else %}text-danger{% endif %}"
+                                    >
+                            {{ file_name }}
+                            </option>
+                        {% endfor %}
+                    </select>
+                    <input name="agn_id" value="{{ agn_id }}" type="hidden">
+                    <input type="submit" class="btn btn-outline-dark m-2" value="Goto" />
+                </form>
+                <hr style="color: black;">
+                <form action="/grade-update" method="post">
+                    <input name="agn_id" value="{{ agn_id }}" type="hidden">
+                    <input name="student_id" value="{{ file_id }}" type="hidden">
+                    {% for question in rubric %}
+                        {% set q = loop.index0 %}
+                        {% set q_id = question.q_id %}
+                        <p><b>{{ question.caption }}</b></p>
+                        <div class="d-flex flex-gap-1">
+                            {% if current_score %}
+                                {% if current_score[q].1 %}
+                                    <select class="form-select my-2" name="{{ q_id }}" required>
+                                        {% for level in question.assessment %}
+                                            <option value="{{ level.score }}"
+                                                    {% if current_score[q].0 == level.score %} selected {% endif %}>
+                                                {{ level.score }}
+                                            </option>
+                                        {% endfor %}
+                                        <option value="c">customized:</option>
+                                    </select>
+                                    <input class="form-control m-2" type="number" name="{{ q_id }}-c" step="0.01" />
+                                {% else %}
+                                    <select class="form-select my-2" name="{{ q_id }}" required>
+                                        {% for level in question.assessment %}
+                                            <option value="{{ level.score }}">{{ level.score }}</option>
+                                        {% endfor %}
+                                        <option value="c" selected>customized:</option>
+                                    </select>
+                                    <input class="form-control m-2" type="number" name="{{ q_id }}-c" step="0.01"
+                                           value="{{ current_score[q].0 }}" />
+                                {% endif %}
+                            {% else %}
+                                <select class="form-select my-2" name="{{ q_id }}" required>
+                                    {% for level in question.assessment %}
+                                        <option value="{{ level.score }}">{{ level.score }}</option>
+                                    {% endfor %}
+                                    <option value="c">customized:</option>
+                                </select>
+                                <input class="form-control m-2" type="number" name="{{ q_id }}-c" step="0.01" />
+                            {% endif %}
+                        </div>
+                        <table class="table table-sm table-borderless">
+                            <tbody>
                             {% for level in question.assessment %}
-                                <option value="{{ level.score }}">{{ level.score }}</option>
+                                <tr><td class="fw-bold">{{ level.score }}'</td><td>{{ level.definition }}</td></tr>
                             {% endfor %}
-                            <option value="c">customized:</option>
-                        </select>
-                        <input class="form-control m-2" type="number" name="{{ q_id }}-c" step="0.01" />
-                    {% endif %}
-                </div>
-                <table class="table table-sm table-borderless">
-                    <tbody>
-                    {% for level in question.assessment %}
-                        <tr><td class="fw-bold">{{ level.score }}'</td><td>{{ level.definition }}</td></tr>
+                            </tbody>
+                        </table>
                     {% endfor %}
-                    </tbody>
-                </table>
-            {% endfor %}
-            <p><b>Note</b></p>
-            <textarea class="form-control" name="note" rows="3">{{ note }}</textarea>
-            <div class="text-center d-flex">
-                <input type="submit" name="action" class="btn btn-bd-primary m-2" value="Save">
-                {% if id < filelist | length - 1 %}
-                    <input type="submit" name="action" class="btn btn-bd-primary m-2" value="Save and continue">
-                {% else %}
-                    <button type="button" class="btn btn-bd-primary m-2" disabled>It is the last file.</button>
-                {% endif %}
-            </div>
-        </form>
-    </div>
-    <div class="mx-3 my-0">
-        <hr>
-        <p class="text-secondary">Powered by
-            <a href="https://github.com/cloudy-sfu" style="text-decoration: none;" target="_blank">
-                cloudy-sfu
-            </a>
-            , 2023.
-        </p>
-    </div>
-</div>
-
-<div class="modal fade" id="student-link" tabindex="-1" aria-labelledby="student-link-label" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h1 class="modal-title fs-5" id="student-link-label">Source</h1>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <p>
-                    <a href="/grade-file?config={{ config }}" download style="text-decoration: none;">Download</a>
-                    the source submission.
-                </p>
+                    <p><b>Note</b></p>
+                    <textarea class="form-control" name="note" rows="3">{{ note }}</textarea>
+                    <div class="text-center d-flex">
+                        <input type="submit" name="action" class="btn btn-outline-dark m-2" value="Save">
+                        {% if file_id < n %}
+                            <input type="submit" name="action" class="btn btn-outline-dark m-2" value="Save and continue">
+                        {% else %}
+                            <button type="button" class="btn btn-outline-dark m-2" disabled>It is the last file.</button>
+                        {% endif %}
+                    </div>
+                </form>
             </div>
+            <ul class="list-unstyled ps-0 mb-0">
+                <li class="border-top my-3"></li>
+                <li class="text-muted">&copy; <a href="https://github.com/cloudy-sfu">cloudy-sfu</a> 2023</li>
+            </ul>
+        </div>
+        <!-- End of the sidebar -->
+        <div class="col-md-9 p-0 d-flex flex-column" style="height: 100vh;">
+            <iframe class="flex-grow-1" width="100%" id="article"
+                    src="/grade-file?file_id={{ file_id }}&assignment_id={{ agn_id }}"></iframe>
         </div>
     </div>
+    <script>
+        function article(link) {
+            document.getElementById('article').setAttribute('src', link);
+        }
+    </script>
 </div>
-
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/index.html b/templates/index.html
index 05eaaaf..71e9cc9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,110 +6,56 @@
     <title>Homework Grader</title>
     <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" />
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
 </head>
 <body class="container-md d-flex flex-column justify-content-between" style="height: 100vh;">
     <div class="alert mb-0 row">
         <div class="col-md-12">
             <h1 class="text-center">Homework Grader</h1>
-            <p class="text-danger fw-bold">
-                This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
-            </p>
             <p>
                 <button type="button" class="btn btn-light me-2" data-bs-toggle="modal" data-bs-target="#add-config">
                     New
                 </button>
-                <button type="button" class="btn btn-light me-2" data-bs-toggle="modal" data-bs-target="#import-config">
-                    Import
-                </button>
             </p>
-            <table class="table table-bordered">
-                <thead>
-                    <tr>
-                        <th>Assignment</th>
-                        <th colspan="4">Actions</th>
-                        <th colspan="2">Config</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for config in existed_configs %}
-                    <tr>
-                        <td>{{ config }}</td>
-                        <td>
-                            <a href="/config-fork?config={{ config }}" style="text-decoration: none;">
-                                Rubric
-                            </a>
-                        </td>
-                        <td class="text-nowrap">
-                            <a href="#" style="text-decoration: none;" data-bs-toggle="modal" data-bs-target="#link-to-files-{{ loop.index }}">
-                                Link to files
-                            </a>
-                        </td>
-                        <td>
-                            <a href="/grade?config={{ config }}" style="text-decoration: none;">
-                                Grading
-                            </a>
-                        </td>
-                        <td>
-                            <a href="/analyze?config={{ config }}" style="text-decoration: none;">
-                                Scores
-                            </a>
-                        </td>
-                        <td>
-                            <a type="button" data-bs-toggle="modal" data-bs-target="#delete-config" style="text-decoration: none; color: #0d6efd;" onclick="confirm_deletion('{{ config }}')">
-                                Delete
-                            </a>
-                        </td>
-                        <td>
-                            <a href="/export-config?config={{ config }}" style="text-decoration: none;">
-                                Export
-                            </a>
-                        </td>
-                    </tr>
-                    <div class="modal fade" id="link-to-files-{{ loop.index }}" tabindex="-1" aria-labelledby="link-to-files-{{ loop.index }}-label" aria-hidden="true">
-                        <div class="modal-dialog">
-                            <div class="modal-content">
-                                <div class="modal-header">
-                                    <h1 class="modal-title fs-5" id="link-to-files-{{ loop.index }}-label">Link to files</h1>
-                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                                </div>
-                                <form method="post" action="/config-check-name">
-                                    <div class="modal-body">
-                                        <input type="hidden" name="config_name" value="{{ config }}" />
-                                        <p>
-                                            <label>Base directory:</label>
-                                            <input class="form-control" type="text" name="base_dir" value="{{ base_dir }}" required />
-                                            <i>
-                                                The path of a folder containing students' submissions. It can be relative path from project root (of this software), or absolute path.
-                                            </i>
-                                        </p>
-                                        <div class="form-check">
-                                            <label class="form-check-label">
-                                                Clear existed scores and comments.
-                                            </label>
-                                            <input class="form-check-input" type="checkbox" name="rebuild" checked />
-                                        </div>
-                                    </div>
-                                    <div class="modal-footer">
-                                        <input type="submit" class="btn btn-primary" value="Save" />
-                                    </div>
-                                </form>
-                            </div>
-                        </div>
+            <div class="row">
+                {% for cfg_id, cfg_name in existed_configs %}
+                <div class="col-md-6">
+                    <div class="alert alert-light">
+                        <h5 class="card-title">{{ cfg_name }}</h5>
+                        <ul class="nav gap-2">
+                            <li class="nav-item">
+                                <span style="display: block; padding: var(--bs-nav-link-padding-y) 0;">Actions:</span>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="/rubric?id={{ cfg_id }}">Rubric</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="/grade?id={{ cfg_id }}">Grading</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="/analyze?id={{ cfg_id }}">Score</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" type="button" data-bs-toggle="modal" data-bs-target="#delete-config"
+                                   onclick="confirm_deletion('{{ cfg_id }}', '{{ cfg_name }}')">
+                                    Delete
+                                </a>
+                            </li>
+                        </ul>
                     </div>
-                    {% endfor %}
-                </tbody>
-            </table>
+                </div>
+                {% endfor %}
+            </div>
         </div>
     </div>
 
     <div class="row">
         <div class="col-md-12">
+            <p class="text-danger fw-bold">
+                This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
+            </p>
             <p class="text-secondary">
-                Powered by
-                <a href="https://github.com/cloudy-sfu" style="text-decoration: none;" target="_blank">
-                    cloudy-sfu
-                </a>
-                , 2023.
+                &copy; <a href="https://github.com/cloudy-sfu" style="text-decoration: none;">cloudy-sfu</a> 2023
             </p>
         </div>
         <div class="modal fade" id="delete-config" tabindex="-1" aria-labelledby="delete-config-label" aria-hidden="true">
@@ -139,6 +85,13 @@ <h1 class="modal-title fs-5" id="add-config-label">New Assignment</h1>
                                 <label>Name:</label>
                                 <input class="form-control" type="text" maxlength="64" name="name" required />
                             </p>
+                            <p>
+                                <a href="" style="text-decoration: none;" id="base_dir_1">Select base directory</a><br>
+                                Select a folder, which contains students' submissions, using the popped-up file
+                                selector.
+                            </p>
+                            <input id="base_dir" class="form-control" type="text" name="base_dir" readonly required />
+                            <p id="base_dir_2"></p>
                         </div>
                         <div class="modal-footer">
                             <input type="submit" class="btn btn-primary" value="Save" />
@@ -166,10 +119,26 @@ <h1 class="modal-title fs-5" id="import-config-label">Import Assignment</h1>
             </div>
         </div>
         <script>
-            function confirm_deletion(name) {
-                document.getElementById("deletion-sender").href = "/delete-config?name=" + name;
+            function confirm_deletion(cfg_id, name) {
+                document.getElementById("deletion-sender").href = "/delete-config?id=" + cfg_id;
                 document.getElementById("deletion-filename").innerText = name;
             }
+            document.getElementById('base_dir_1').addEventListener('click', (e) => {
+                e.preventDefault();
+                $.ajax({
+                    type: 'GET',
+                    url: '/select-base-directory',
+                    success: (r) => {
+                        if (r['error'] === 0) {
+                            document.getElementById('base_dir').value = r['base_dir'];
+                        }
+                        document.getElementById('base_dir_2').innerText = r['message'];
+                    },
+                    fail: () => {
+                        document.getElementById('base_dir_2').innerText = 'Cannot detect files in your computer.';
+                    }
+                });
+            });
         </script>
     </div>
 </body>
diff --git a/templates/config.html b/templates/rubric.html
similarity index 95%
rename from templates/config.html
rename to templates/rubric.html
index 47ff24d..46f4925 100644
--- a/templates/config.html
+++ b/templates/rubric.html
@@ -22,8 +22,8 @@
         <div class="col-md-6">
             <p class="text-center fw-bold">{{ display_name }}</p>
             <p><a href="/" style="text-decoration: none">Back</a></p>
-            <form method="post" action="/config-rubric" class="alert border-dark">
-                <input type="hidden" name="config_name" value="{{ config_name }}" />
+            <form method="post" action="/rubric-edit" class="alert border-dark">
+                <input type="hidden" name="agn_id" value="{{ agn_id }}" />
                 <div id="config-add-rubric">
                 {% for question in rubric %}
                     <div class="alert alert-light" id="question-{{ question.q_id }}">
@@ -46,7 +46,7 @@
                                            step="0.01" class="form-control" value="{{ level.score }}" required />
                                     <label>Definition:</label>
                                     <textarea name="def-{{ question.q_id }}-{{ loop.index }}" class="form-control"
-                                              rows="3" required >{{ level.definition }}</textarea>
+                                              rows="3">{{ level.definition }}</textarea>
                                 </div>
                             {% endfor %}
                         </div>
@@ -109,7 +109,7 @@
     <a type="button" onclick="del_level(${q}, ${max_a_id+1})" style="text-decoration: none; color: #0d6efd">Remove</a>
     <input name="score-${q}-${max_a_id+1}" type="number" step="0.01" class="form-control" required />
     <label>Definition:</label>
-    <textarea name="def-${q}-${max_a_id+1}" class="form-control" rows="3" required ></textarea>
+    <textarea name="def-${q}-${max_a_id+1}" class="form-control" rows="3"></textarea>
 </div>`
             const level_node = document.createRange().createContextualFragment(level);
             assessment_area.appendChild(level_node);
diff --git a/winapi.py b/winapi.py
new file mode 100644
index 0000000..c3573e4
--- /dev/null
+++ b/winapi.py
@@ -0,0 +1,87 @@
+import ctypes
+
+BIF_RETURNONLYFSDIRS = 0x0001
+BIF_NEWDIALOGSTYLE = 0x0040
+OFN_EXPLORER = 0x00080000
+OFN_FILEMUSTEXIST = 0x00001000
+OFN_HIDEREADONLY = 0x00000004
+
+
+class BROWSEINFO(ctypes.Structure):
+    _fields_ = [
+        ("hwndOwner", ctypes.c_void_p),
+        ("pidlRoot", ctypes.c_void_p),
+        ("pszDisplayName", ctypes.c_wchar_p),
+        ("lpszTitle", ctypes.c_wchar_p),
+        ("ulFlags", ctypes.c_uint),
+        ("lpfn", ctypes.c_void_p),
+        ("lParam", ctypes.c_void_p),
+        ("iImage", ctypes.c_int)
+    ]
+
+
+SHBrowseForFolder = ctypes.windll.shell32.SHBrowseForFolderW
+SHBrowseForFolder.argtypes = [ctypes.POINTER(BROWSEINFO)]
+SHBrowseForFolder.restype = ctypes.c_void_p
+SHGetPathFromIDList = ctypes.windll.shell32.SHGetPathFromIDListW
+SHGetPathFromIDList.argtypes = [ctypes.c_void_p, ctypes.c_wchar_p]
+SHGetPathFromIDList.restype = ctypes.c_long
+
+
+class OPENFILENAME(ctypes.Structure):
+    _fields_ = [
+        ("lStructSize", ctypes.c_ulong),
+        ("hwndOwner", ctypes.c_void_p),
+        ("hInstance", ctypes.c_void_p),
+        ("lpstrFilter", ctypes.c_wchar_p),
+        ("lpstrCustomFilter", ctypes.c_wchar_p),
+        ("nMaxCustFilter", ctypes.c_ulong),
+        ("nFilterIndex", ctypes.c_ulong),
+        ("lpstrFile", ctypes.POINTER(ctypes.c_wchar)),
+        ("nMaxFile", ctypes.c_ulong),
+        ("lpstrFileTitle", ctypes.c_wchar_p),
+        ("nMaxFileTitle", ctypes.c_ulong),
+        ("lpstrInitialDir", ctypes.c_wchar_p),
+        ("lpstrTitle", ctypes.c_wchar_p),
+        ("Flags", ctypes.c_ulong),
+        ("nFileOffset", ctypes.c_ushort),
+        ("nFileExtension", ctypes.c_ushort),
+        ("lpstrDefExt", ctypes.c_wchar_p),
+        ("lCustData", ctypes.c_long),
+        ("lpfnHook", ctypes.c_void_p),
+        ("lpTemplateName", ctypes.c_wchar_p),
+        ("pvReserved", ctypes.c_void_p),
+        ("dwReserved", ctypes.c_ulong),
+        ("FlagsEx", ctypes.c_ulong)
+    ]
+
+
+def select_folder():
+    bi = BROWSEINFO()
+    bi.lpszTitle = "Select the base directory."
+    bi.ulFlags = BIF_RETURNONLYFSDIRS | BIF_NEWDIALOGSTYLE
+    pidl = SHBrowseForFolder(ctypes.byref(bi))
+    path = ctypes.create_unicode_buffer(260)  # ctypes.wintypes.MAX_PATH = 260
+    if pidl and SHGetPathFromIDList(pidl, path):
+        return path.value
+
+
+def select_file():
+    ofn = OPENFILENAME()
+    ofn.lStructSize = ctypes.sizeof(OPENFILENAME)
+    buffer = ctypes.create_unicode_buffer(260)
+    ofn.lpstrFile = buffer
+    ofn.nMaxFile = 260
+    ofn.lpstrFilter = "All Files\0*.*\0"
+    ofn.nFilterIndex = 1
+    ofn.Flags = OFN_EXPLORER | OFN_FILEMUSTEXIST | OFN_HIDEREADONLY
+    if ctypes.windll.comdlg32.GetOpenFileNameW(ctypes.byref(ofn)):
+        return buffer.value
+
+
+if __name__ == '__main__':
+    base_dir = select_folder()
+    print(base_dir)
+
+    file = select_file()
+    print(file)