quickForm快速入门

致敬QuickForm团队你们把AI赋能教师又向前推进了一大步。quickForm项目地址https://quickform.cn/最新下载地址https://my.feishu.cn/drive/folder/Q0FUf5KnLlQHJRdqyprck8YTnre建议选择图中版本解压就可以用不要解压到桌面建议放到d盘目录不要包含中文。项目背景、团队就不再这里介绍了这个项目定位非常不错正如它的官网描述“QuickForm打通AI赋能教育的最后一公里”这里用一个实操案例进行讲解内容仅做案例演示1.quickForm是什么他到底做了什么事情今天小王老师想测试一下401班的口算能力所以他通过豆包编写了一个简单html网页。出来的界面是这样的学生们都做得挺开心的。小王老师突然在想我要怎么才能收集到学生做题的情况呢小王老师以前做过网页开发大概了解这个事情后续要怎么做1.他现在做的网页只是一个前端接下来他要写一个后端收集程序2.后端收集程序要接收网页表单form提交过来的信息进行初步处理以后字段分解、格式化写到一个文本文件里面只简单保存结果不需要存数据库了那样还要安装数据库、建表等一众工作3.然后把写好的前后端要放到应用程序服务器运行比如IIS、tomcat等具有http功能的server服务4.然后学生通过这个http服务访问刚才的前端等学生都提交完信息后再到服务端下载这个文本文件5.将文本文件交给大模型分析统计了解全面的正确率情况好麻烦写代码1个多小时一下就没了。就算有ai编程工具辅助也需要一事一办每个前端网页都要写一个配套的收集后端。这还是建立在小王老师具备网页开发的能力之上的那普通老师更没法完成这项工作。-----------------------------quickForm其实就是一个帮普通老师解决以上困扰的工具它包办了把普通的html页面变成具备收集、分析处理能力的应用所有后续工作。2.quickForm一词由来quickForm这个名字取的非常精妙form是html中的“表单”标签放在form里面的控件都可以通过post的方式提交到服务器的也就是说在上面例子的小游戏里面如果你想收集某些特定信息如姓名、答题数、正确率那么你就要设法将这些内容放到form里面最终可以提交到后台由后台可以收集到这些信息。quick一此体现了这个功能可以被快速的完成节约老师的时间、精力、学习成本使得老师只需要关注前端的细节不需要关注后台的具体实现只需要在前端进行小幅改动就能够完成学生信息的收集工作。3.如何调整html以适配quickForm在生成html时或者生成以后的调整你需要增加如下提示词我需要一个文本框填写学生姓名在点击交卷批改的时候将学生姓名、答题数量、正确率这三项数值使用form提交到后端网页。Tips你要收集什么东西这里需要明确明确明确指出这个东西需要使用form提交。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title四年级口算小达人/title style * { margin: 0; padding: 0; box-sizing: border-box; font-family: Microsoft YaHei, 微软雅黑, sans-serif; } body { background: linear-gradient(135deg, #87CEEB 0%, #98FB98 100%); min-height: 100vh; padding: 20px; display: flex; justify-content: center; align-items: center; } .container { background: white; width: 100%; max-width: 700px; border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .title { text-align: center; color: #FF6347; font-size: 32px; font-weight: bold; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); } .subtitle { text-align: center; color: #4682B4; font-size: 18px; margin-bottom: 20px; } /* 学生姓名输入框 */ .name-box { text-align: center; margin: 20px 0; font-size: 20px; } .name-box input { width: 200px; height: 40px; border: 2px solid #87CEEB; border-radius: 8px; font-size: 18px; padding: 0 10px; outline: none; } .question-box { margin: 20px 0; padding: 15px; border-radius: 12px; font-size: 22px; display: flex; align-items: center; gap: 15px; transition: all 0.3s; } .correct { background-color: #90EE90; border: 2px solid #32CD32; } .wrong { background-color: #FFB6C1; border: 2px solid #FF4500; } .num { font-weight: bold; color: #1E90FF; width: 40px; } .question { flex: 1; font-weight: bold; } input { width: 100px; height: 40px; border: 2px solid #87CEEB; border-radius: 8px; font-size: 20px; text-align: center; outline: none; padding: 5px; } input:focus { border-color: #FF6347; } .btn-box { text-align: center; margin: 30px 0; } button { background: linear-gradient(45deg, #FF6347, #FF4500); color: white; border: none; padding: 12px 40px; font-size: 20px; border-radius: 30px; cursor: pointer; font-weight: bold; transition: transform 0.2s; box-shadow: 0 5px 15px rgba(255,99,71,0.3); } button:hover { transform: scale(1.05); } .result { text-align: center; font-size: 22px; font-weight: bold; margin-top: 20px; padding: 15px; border-radius: 12px; background: #f8f9fa; } .correct-count { color: #32CD32; margin: 0 10px; } .wrong-count { color: #FF4500; margin: 0 10px; } .rate { color: #1E90FF; margin: 0 10px; } .tips { text-align: center; color: #666; margin-top: 15px; font-size: 14px; } /style /head body div classcontainer h1 classtitle 四年级口算小达人 /h1 p classsubtitle请先填写姓名再完成10道口算题吧/p !-- 学生姓名 -- div classname-box 学生姓名 input typetext idstudentName placeholder请输入姓名 required /div !-- 题目区域 -- div idquestions/div !-- 交卷按钮 -- div classbtn-box button onclickcheckAnswers() 交卷批改并提交/button /div !-- 结果统计 -- div classresult idresult styledisplay: none; 本次练习做对 span classcorrect-count idcorrectNum0/span 题 做错 span classwrong-count idwrongNum0/span 题 正确率 span classrate idcorrectRate0%/span /div !-- 用于提交到后端的隐藏表单 -- form idsubmitForm actionsubmit.php methodpost styledisplay: none; input typehidden namestudentName idform_studentName input typehidden nametotalCount idform_totalCount input typehidden namecorrectRate idform_correctRate /form p classtips 填写姓名 → 输入答案 → 点击交卷 → 自动提交成绩/p /div script let questions []; const total 10; // 生成口算题 function generateQuestions() { questions []; for(let i0; itotal; i){ let type Math.floor(Math.random() * 4); let a, b, answer, question; switch(type){ case 0: a Math.floor(Math.random() * 90) 10; b Math.floor(Math.random() * 90) 10; answer a b; question ${a} ${b} ; break; case 1: a Math.floor(Math.random() * 90) 10; b Math.floor(Math.random() * a); answer a - b; question ${a} - ${b} ; break; case 2: a Math.floor(Math.random() * 20) 1; b Math.floor(Math.random() * 20) 1; answer a * b; question ${a} × ${b} ; break; case 3: b Math.floor(Math.random() * 15) 1; answer Math.floor(Math.random() * 20) 1; a b * answer; question ${a} ÷ ${b} ; break; } questions.push({ question, answer }); } renderQuestions(); } // 渲染题目 function renderQuestions() { let html ; questions.forEach((item, index) { html div classquestion-box idbox${index} span classnum${index 1}./span span classquestion${item.question}/span input typenumber idanswer${index} placeholder答案 /div; }); document.getElementById(questions).innerHTML html; } // 批改 提交 function checkAnswers() { // 获取姓名 let name document.getElementById(studentName).value.trim(); if (!name) { alert(请先填写学生姓名); return; } let correct 0; questions.forEach((item, index) { let userAnswer document.getElementById(answer${index}).value; let box document.getElementById(box${index}); box.classList.remove(correct, wrong); if (userAnswer item.answer) { box.classList.add(correct); correct; } else { box.classList.add(wrong); } }); let wrong total - correct; let rate ((correct / total) * 100).toFixed(1); // 显示结果 document.getElementById(correctNum).textContent correct; document.getElementById(wrongNum).textContent wrong; document.getElementById(correctRate).textContent rate %; document.getElementById(result).style.display block; // 赋值给表单并提交 document.getElementById(form_studentName).value name; document.getElementById(form_totalCount).value total; document.getElementById(form_correctRate).value rate; // 提交到后端 document.getElementById(submitForm).submit(); } window.onload generateQuestions; /script /body /htmlAI实现的方式很多不用纠结具体的表现形式知道这里有个form就好。注意这里 actionsubmit.php 等会我们要来改接下来要把这个网页交给quickForm了。4.启动quickForm并创建一个新项目我们点开“局域网访问”默认的用户名 wst 密码 quickform第一次使用需要在后台设置AI模型这里用的是豆包。说明这里使用大模型进行数据处理是需要自己注册大模型接口的并不是免费的豆包火山引擎注册用户送50万token可以用于功能测试正常使用需要保有一定额度避免token用尽无法响应影响课堂正常教学。访问“火山引擎”https://www.volcengine.com/这里可以使用抖音或者手机号登录然后进入控制台再点击火山方舟先创建一个apikey这个东西就是要填到quickform的然后在开通管理中开通下面这个在第二页右侧点击开通嫌麻烦可以全部开通这里其实是后端写死了就用这个模型。这个东西写在QuickForm 1.5/app.py 的第273行其实有聪明的小伙伴已经想到了豆包是每一个模型都送了50万token这个用完了换下一个就行了是的没错接下来进入正题这个a.html是我刚从豆包复制保存到本地的点箭头指向位置可以看到现在是通过局域网地址访问这个网页了。但是这个网页还是不能提交的要修改form的action指向重新上传复制上面的地址手动修改html或者使用豆包添加提示词创建完应用后以POST方式向 http://10.20.81.177:5001/api/2ZFOtkvgrVW 发送数据然后编辑任务删除刚才上传的文件重新上传现在就可以给学生用了(2026年4月7日更新)鉴于对于普通老师来说上面这个操作两次的动作还是有点麻烦了查了一下项目的主页发现项目用的是MIT的开源协议感谢项目组的无私奉献所以我修改了一下app.py的功能实现了上传以后自动注入form actionxxxxx ,这样就可以一步到位了编辑任务上传新文件的时候也支持此功能。通过网盘分享的文件app.py链接: https://pan.baidu.com/s/1ra1D5yfmo-yWa_-44feBnQ?pwdbaxt 提取码: baxt覆盖这个文件即可。注意是1.5版其他版本不确定5.使用分发给学生的链接点击这个需要确保学生机和教师机在可以连同的网络之内可以使用机房的教师机也可以使用服务器。学生提交完以后出现界面如果长这样这是网页跳转结果其实已经成功提交数据。PS这里可以在豆包中追加后续提示词让学生提交后不跳转让界面友好化学生点击提交按钮后页面不要跳转保持在当前页面弹窗友好提示数据已经提交且禁用掉提交按钮。禁用掉提交按钮是为了不让学生重复提交去后台看看接下来可以选择导出或者数据分析。点击开始分析就要把这一串东西交给远端的大模型接口了。分析出来的结果是在线看还可以下载以后文件长这样这是markdown格式文件格式看起来没有网页那么友好显得比较凌乱。6.markdown转word格式这里介绍一个简单实用的办法把markdown转成本地word格式pandoc工具https://github.com/jgm/pandoc/releases下载并安装这个工具现把分析报告的网页下载然后打开ctrla全选ctrlc复制找个目录创建一个文本文档保存关闭然后重命名 a.md名称随意到地址栏输入 cmd然后回车进入到当前目录的终端模式运行命令pandoc a.md -o a.docx解释这个命令是通过pandoc指令将a.md输出为a.docx格式。再看看这个docx就舒服多了总结quickForm工具真的通过AI打通了课上交互的最后一公里通过抹平技术门槛降低了普通老师进行课堂交互应用的成本。老师们可以把注意力更多的放在构建前端本身而无需关注后端的实现并且可以轻松的拿到统计结果可以节约大量的时间和精力。