BrainStormingSystem
我要設計一個腦力激盪的系統。使用Github的網站網頁+Supabase的資料庫系統。
功能需求:
1.主畫面 (Main)
1.1 第一區塊,"發起新討論"按鈕
1.2 第二區塊,2個輸入框(第一是4位數討論區編號,第二是暱稱),以及1個"加入討論"按鈕。
2.發起者(教師)功能
2.1 在主畫面按"發起新討論"按鈕。之後跳到"問題區"(Questions)畫面。該畫面上面會有一個臨時的4位數數字隨機碼,讓老師公布給學生,加入此討論。
請注意,這個4位數是隨機產生的,但系統在資料庫裏面,必須要有一個流水號來記錄這個當作討論串主KEY
因為以後這個4位數仍可能會出現,所以不能當作是系統儲存的討論串主KEY。
2.2 "討論標題區"畫面,最上方會有兩個數字,第一是討論區編號(4位數),第二是目前加入人數。底下則是此討論區的問題清單(Title Lists)。這個清單的最底下,有一個"增加新問題"的按鈕。
2.3 這些問題清單,必須都要在前面有一個"單選鈕"。同一時間,只有一個"問題",可以被點選。當該問題被點選的時候,學生就會進入這個問題的討論與回答紀錄。這叫做active question。作用中的問題。
2.4 點選問題清單的問題,則可以進到該問題的回答畫面(Answers),看到目前大家的回答狀況(不影響active question)。這個畫面,最上面同樣會有4位數討論區編號,以及加入人數。
此外會有一個"回標題區"按鈕,可以回到標題區。
接下來則是暱稱與答題內容。
回答區可以用表格呈現,有三欄,第一欄是暱稱,第二欄是時間,第三欄是內容。請注意,還沒回答的人,也必須要呈現暱稱,至於時間和內容則以空白呈現。
3.討論者(學生)功能
3.1 主畫面-輸入4位數與暱稱之後,加入討論。如果4位數錯誤,則顯示代碼錯誤,請重新輸入。如果正確,則進入該討論區的回答畫面(input),並且進入目前老師設定的active question。這個回答畫面,最上方有"討論區編號,以及討論區人數。然後是"問題",然後是一個大型的輸入框,最後是"送出"。
3.2 送出後,進入到"等待畫面"(waiting)。該畫面顯示"你的回答已於 XX:XX時間送出"。以及2個按鈕,第一是"下一個回答",第二是"離開討論"。
下一個回答,則回到input,離開討論,則回到main
https://bagilu.github.io/P02V3
老師,我已完整理解您的系統構想:它本質上是
「教師發起一個討論室(用臨時 4 位碼讓學生加入)
→ 教師在討論室中管理問題清單並指定當前 active question
→ 學生永遠只對 active question 作答
→ 教師可切換 active question、也可查看任何問題的回答列表(含未回答者的空白列)
→ 學生送出後進入 waiting,可再回去提交下一個回答或離開」。
下面我用「架構建議」的方式,先把最關鍵的設計點、可能踩雷處、以及我建議的資料表與流程一次講清楚,讓您後面逐步實作時不會改來改去。
它是「加入用的短碼」,不應作為資料庫主鍵(您已指出,完全正確)。
建議:discussion_id 用流水號(或 UUID),join_code 用 4 位數字。
但要注意:您也說「以後 4 位碼仍可能重複」,這會導致一個實務問題:
學生輸入同一個 4 位碼時,到底要進哪一個討論室?
解法只有兩類(您可二選一,不用現在決定,先記住差異):
允許重複,但加上有效期限:例如 join_code 只在「討論室 open 狀態」有效;同碼重複時,只會命中「最新且 open 的那一個」。
不允許重複(較簡單):建立時檢查資料庫,若該碼在 open 討論室中已存在就重抽。
就您要「教學現場順暢」而言,我建議走 (2) open 期間不重複,因為學生輸入 4 位碼的直覺就是「唯一定位」。
您的設計是:同一時間只有一個 active question,學生加入後直接進該題作答。
建議:discussions.active_question_id 是唯一權威(single source of truth)。
教師在 Title Lists 點單選鈕,其實就是在更新 active_question_id。
您希望 Answers 表格中,「尚未回答的人也要顯示暱稱,時間/內容空白」。這個需求會直接影響資料庫設計。
我建議最穩的作法是:把「加入討論」視為一筆 membership 記錄,回答只是可有可無的附屬資料。
participants:記錄誰加入了(暱稱、加入時間、是否已離開)
answers:記錄回答(對應 participant + question)
畫面要顯示「每個人是否回答」時:用 participants LEFT JOIN answers,即可自然產生空白列。
我用最少表格滿足您全部需求,且未來好擴充:
id (PK, bigint identity 或 uuid)
join_code (char(4) 或 varchar(4))
title(討論室標題,可選;您目前沒寫但通常會需要)
status(open/closed)
active_question_id(FK → TblQuestions.id,可為 null)
created_at
id (PK)
discussion_id (FK)
question_text
sort_order(控制顯示順序)
created_at
id (PK)
discussion_id (FK)
nickname
joined_at
left_at(nullable)
約束建議:同一個 discussion_id 下 nickname 不要重複(避免表格混亂)
id (PK)
discussion_id (FK,方便查詢與一致性檢查)
question_id (FK)
participant_id (FK)
content (text)
submitted_at
約束建議:同一 participant_id + question_id 「是否允許多次回答」要先決定
您的 waiting 畫面有「下一個回答」回到 input,但那是針對同一題還是下一題?您描述看起來是「同一題可以再補一則回答」或「等下一輪老師換題再答」。
若要保守:先做 每題每人只保留最後一筆(unique constraint + upsert)。
若要保留歷史:允許多筆(則 Answers 表格要顯示最新/全部,UI 要定義)。
我建議教學腦力激盪通常是「一題一人一則」最清楚;如果要補充,可以讓學生編輯(update)而不是新增多筆。
按鈕:發起新討論 → create discussion + 產生 join_code → 跳 Questions(或 Title Lists)
輸入:join_code + nickname → join → 若成功 → Student Input(active question)
Questions / Title Lists
顯示:join_code、目前加入人數(participants count)
列表:Questions(每列有 radio)
按鈕:增加新問題 → insert question
radio click:update discussions.active_question_id
Answers(教師查看某題回答)
顯示:join_code、加入人數
表格:participants LEFT JOIN answers(該 question)
按鈕:回標題區
您特別說:教師查看 Answers 不影響 active question。
這表示「查看」只是 read-only,不會改 active_question_id。
Input
顯示:join_code、人數、active question text
輸入框:content
送出:寫入 TblAnswers(建議 upsert)
Waiting
顯示:已送出時間
按鈕:
下一個回答 → 回 Input(仍是 active question;若老師已換題,會顯示新題)
離開討論 → 更新 left_at(可選)→ 回 Main
join_code 重複定位問題
若不限制 open 狀態唯一,未來一定出現「同碼多室」無法判定。建議 open 期間唯一。
暱稱重複
同一討論室中暱稱若重複,教師表格會無法辨識誰是誰。建議加 unique(discussion_id, nickname)。
即時人數與即時題目更新
您的系統其實需要「近即時」更新 active question 與人數。
Supabase Realtime 可以做到;但一開始也可用輪詢(每 2–3 秒重新抓 active question + participants count)先跑起來。
未回答者顯示空白列
一定要有 participants 表,不然你不知道「誰還沒回答」。
教師/學生權限
如果不做權限,任何人知道 join_code 就能改 active question、加題目。
最小可用方案:先不做登入,但在 discussion 建立時產生一個 teacher_token(長字串)只給老師,教師端所有寫入操作都必須帶 token 才允許(用 RLS 或 Edge Function 驗證)。
這一步很重要,否則教學現場很容易被學生亂按破壞。
資料一致性(discussion_id 必須貫穿所有表)
Answers 既有 question_id 又有 participant_id,兩者都指向同一 discussion_id,務必用 constraint 或 server-side 檢查避免「跨討論室亂寫」的髒資料。
Supabase 建表(Discussions / Questions / Participants / Answers)
Main:建立討論室 + 產生 join_code(先做到 open 期間不重複)
學生 join:輸入碼 + 暱稱 → insert participant
教師新增題目、設定 active question
學生 Input:讀 active question → submit answer(upsert)
教師 Answers:用 LEFT JOIN 顯示「所有暱稱 + 是否回答」
最後再加:Realtime 或輪詢刷新、離開討論、討論室 close
教師端加一個「清空本題所有回答」或「鎖定本題(停止提交)」
→ 腦力激盪教學非常常用(收斂階段)。
加入「匿名模式」選項:教師看得到、學生看不到彼此(或相反)
→ 對敏感議題很有用。
每題加「狀態」:draft / open / closed
→ 讓學生端更一致,不必靠猜。
如果您同意我上面的資料表與流程方向,下一步我會直接給您:
Supabase SQL 建表腳本(含約束、索引)
GitHub Pages 的前端檔案結構(純 HTML + Bootstrap + 原生 JS 或您偏好的框架)
最基本的 Supabase client 初始化與每個畫面所需的 API(create discussion / join / fetch active question / upsert answer / list participants+answers)
您只要說一句:「先從資料庫建表開始」或「先從主畫面前端開始」,我就按那個順序給可直接貼上使用的版本。
課堂中的腦力激盪活動,廣泛應用於促進學生參與與創意發想,但在實務上常面臨參與不均、想法難以被全面看見,以及缺乏可供分析之歷程紀錄等限制。儘管數位工具逐漸被導入教學情境以改善上述問題,既有研究多集中於通用型平台之應用,較少探討結合教學設計與研究架構之專門化系統。本研究採用Github網站與Supabase資料庫,針對研究需要,自行開發腦力激盪教學活動系統BIMS(Brainstorming Interaction Monitoring System)。透過可自行調控的系統介面,以及完全自主掌握的資料庫詳細Log資訊,可仔細評估學生討論的過程,意見形成的過程,每個學生的回饋的演變。BIMS整合匿名或暱稱參與、即時輸入、討論串回應,以及以資料庫為基礎之互動紀錄等功能,旨在降低學生表達壓力、提升想法可視性,並提供可供分析之學習歷程資料。本研究已完成系統開發,後續規劃採用交叉設計之準實驗方法,安排兩個班級在兩項難度相當之腦力激盪任務中交替使用數位系統與結構化實體方式(便利貼與白板整理)。此設計可有效控制班級差異,並聚焦於數位媒介對學習行為之影響。 資料蒐集將包含系統後台紀錄、實體便利貼轉錄資料、學生問卷以及小組產出成果。分析將聚焦於參與行為、想法數量與多樣性,以及學生之學習感受。本研究預期可為腦力激盪教學提供具實證基礎之設計模式,深化對數位媒介在課堂互動中角色之理解,並建立一套可供後續研究參考之方法論架構。 本研究所使用之系統,已經藉由Github平台與Supabase資料庫開發完成雛形。並開始於課堂上進行 。
標題
A Digital System for Monitoring Classroom Brainstorming and Learning Processes
(多字版摘要)
Classroom brainstorming activities are widely used to promote student participation and idea generation. However, in practice, they often face several limitations. These include unequal participation, limited visibility of ideas, and the lack of persistent records for analysis. As a result, instructors may find it difficult to fully understand how ideas emerge, develop, and interact during classroom discussions. Although digital tools have been introduced to address these issues, most existing studies focus on general-purpose platforms. Few studies have examined purpose-built systems that are closely aligned with instructional design and research needs.
This study develops a digital brainstorming system, BIMS (Brainstorming Interaction Monitoring System), using GitHub Pages and a Supabase database. The system is designed specifically for classroom-based research and instructional integration. It provides a customizable interface that can be adjusted according to different teaching scenarios. More importantly, it enables full access to detailed log data stored in the database. These data include timestamps, interaction sequences, and individual contributions. Such features allow for fine-grained analysis of discussion processes, idea formation, and the evolution of student responses over time.
BIMS integrates several key functions. These include anonymous or pseudonymous participation, real-time input, threaded discussion, and structured interaction logging. These design elements aim to reduce participation anxiety and encourage contributions from students who are less likely to speak in traditional settings. At the same time, the system enhances idea visibility and supports the organization of collective knowledge. In addition, the availability of complete interaction records makes it possible to examine learning processes rather than only final outcomes. This aligns with recent interest in process-oriented learning analytics and formative assessment in higher education.
The system has been developed and a functional prototype is currently available. A crossover-based quasi-experimental design is planned for the next phase of the study. Two classes will participate in two comparable brainstorming tasks under alternating conditions. One condition uses BIMS, while the other uses a structured physical method based on sticky notes and whiteboard organization. This design helps control class-level differences and reduces potential bias caused by group characteristics. It also allows for a clearer comparison of learning behaviors across different media conditions.
Data collection will include system log data, transcribed physical artifacts, student questionnaires, and group outputs. The analysis will focus on participation patterns, idea quantity and diversity, and student perceptions of the learning experience. It will also examine how different students engage with the system and how their responses evolve during the activity. The study is expected to provide an evidence-based instructional model for brainstorming activities. It also aims to deepen the understanding of digital mediation in classroom interaction and to offer a structured methodological framework for future research on technology-enhanced collaborative learning.
(較少字版摘要)
Classroom brainstorming activities are widely used to promote student participation and idea generation. However, in practice, they often face several limitations. These include unequal participation, limited visibility of ideas, and the lack of persistent records for analysis. Although digital tools have been introduced to address these issues, most existing studies focus on general-purpose platforms. Few studies have examined purpose-built systems that integrate instructional design with research frameworks.
This study develops a digital brainstorming system, BIMS (Brainstorming Interaction Monitoring System), using GitHub Pages and a Supabase database. The system is designed specifically for research-oriented classroom use. It provides a customizable interface and full access to detailed log data. These features allow for fine-grained analysis of discussion processes, idea formation, and the evolution of individual student responses.
BIMS integrates several key functions. These include anonymous or pseudonymous participation, real-time input, threaded discussion, and database-based interaction logging. The system aims to reduce participation anxiety, enhance idea visibility, and generate analyzable learning process data.
The system has been developed and a functional prototype is currently available. A crossover-based quasi-experimental design is planned for the next phase of the study. Two classes will participate in two comparable brainstorming tasks under alternating conditions. One condition uses BIMS, while the other uses a structured physical method based on sticky notes and whiteboard organization. This design allows for controlling class-level differences and focuses on the effect of the digital medium.
Data collection will include system log data, transcribed physical artifacts, student questionnaires, and group outputs. The analysis will focus on participation patterns, idea quantity and diversity, and student perceptions. The study is expected to provide an evidence-based instructional model for brainstorming activities. It also aims to deepen the understanding of digital mediation in classroom interaction and to offer a methodological framework for future research.
關鍵字
digital brainstorming system, interaction monitoring, classroom interaction, student participation, educational technology
https://cmt3.research.microsoft.com/ICETOL2026/Submission/Index
sc114@g~ + L~ic~.
Submission Summary
Conference Name
6th International Conference on Educational Technology and Online Learning
Paper ID
194
Paper Title
A Digital System for Monitoring Classroom Brainstorming and Learning Processes
Abstract
Classroom brainstorming activities are widely used to promote student participation and idea generation. However, in practice, they often face several limitations. These include unequal participation, limited visibility of ideas, and the lack of persistent records for analysis. Although digital tools have been introduced to address these issues, most existing studies focus on general-purpose platforms. Few studies have examined purpose-built systems that integrate instructional design with research frameworks.
This study develops a digital brainstorming system, BIMS (Brainstorming Interaction Monitoring System), using GitHub Pages and a Supabase database. The system is designed specifically for research-oriented classroom use. It provides a customizable interface and full access to detailed log data. These features allow for fine-grained analysis of discussion processes, idea formation, and the evolution of individual student responses.
BIMS integrates several key functions. These include anonymous or pseudonymous participation, real-time input, threaded discussion, and database-based interaction logging. The system aims to reduce participation anxiety, enhance idea visibility, and generate analyzable learning process data.
The system has been developed and a functional prototype is currently available. A crossover-based quasi-experimental design is planned for the next phase of the study. Two classes will participate in two comparable brainstorming tasks under alternating conditions. One condition uses BIMS, while the other uses a structured physical method based on sticky notes and whiteboard organization. This design allows for controlling class-level differences and focuses on the effect of the digital medium.
Data collection will include system log data, transcribed physical artifacts, student questionnaires, and group outputs. The analysis will focus on participation patterns, idea quantity and diversity, and student perceptions. The study is expected to provide an evidence-based instructional model for brainstorming activities. It also aims to deepen the understanding of digital mediation in classroom interaction and to offer a methodological framework for future research.
Created
2026-04-03 09:00:25 GMT+8
Last Modified
2026-04-03 09:00:25 GMT+8
Authors
Chun-Min Lin (Tzu-Chi University) <sc114@gms.tcu.edu.tw>
Nichelle Valarie (Tzu-Chi University) <113114204@gms.tcu.edu.tw>
Audy - (Tzu-Chi University) <113114207@gms.tcu.edu.tw>
Submission Questions Response
1. Keywords
At least three keywords related to the study should be written
Learning Analytics, Digital Brainstorming, Classroom Interaction, Collaborative Learning
2. Presentation Language
Please select the presentation language
English
3. Presentation Type
Please select the presentation type
Video (will be uploaded to ICETOL's youtube channel)
4. Country
In cases where authors are from different countries, list the countries separated by commas.
Taiwan, Indonesia, Indonesia
5. Institution
In cases where authors are from different institutions, list them separated by commas.
Tzu-Chi University
6. Promo Code
Enter your promo code here if you have one.
[Not Answered]
© 2026 Microsoft Corporation
About CMT | Docs | Terms of Use | Privacy & Cookies | Consumer Health Privacy | Request Free Site
International Conference on Educational Technology and Online Learning
Bremen, Germany
17–20 August 2026
The International Conference on Educational Technology and Online Learning (ICETOL), which will be held for the sixth time in Bremen, Germany between 17–20 August 2026, will take place both face-to-face and online. The main theme of the conference is “Education for uncertain futures: learning, resilience, and responsibility.” Hosted by Constructor University, ICETOL 2026 will feature discussions, best practices, reflections, and shared experiences aligned with the conference theme, contributing to both national and international literature. To promote inclusivity and international participation, ICETOL 2026 accepts presentations in four languages: English, Turkish, German, and Spanish.
ICETOL is supported by
Constructor University, Anadolu University, Balıkesir University, The Open University (UK), Ohio State University, Mary Immaculate College, AKAD University, University of South Africa, Universidad De Burgos, North-West University, EDTECH-U, The Higher School of Education and Training of Berrechid (ESEFB), and University of Malaga.