Giter Site home page Giter Site logo

cuixiaorui / earthworm Goto Github PK

View Code? Open in Web Editor NEW
188.0 5.0 53.0 56.31 MB

Learning English through the method of constructing sentences with conjunctions

Home Page: https://earthworm.cuixueshe.com

JavaScript 19.21% CSS 2.83% TypeScript 77.15% Dockerfile 0.81%

earthworm's Introduction

earthworm

Learning English through the method of constructing sentences with conjunctions

Start

Start the project based on the following steps

Note that this project depends on docker, so make sure that docker is installed first.

  1. install project dependencies

    pnpm install
  2. start application

    pnpm docker:start
  3. stop application

    pnpm docker:stop
  4. init data of database (It only needs to be executed the first time the database is created)

    pnpm db:init

当发现数据有问题时 如何修改

目前课程的数据是基于 pdf 解析得到的 json 文件, 所以在解析的过程中必然会出现一些小问题

那么当遇到这些小问题的时候 大家可以通过修改 json 文件来做出对 earthworm 的贡献

以下是贡献步骤:

  1. 找到当前课程所对应的 json 文件

    json 文件在 scripts/courses 里面

    注意 courseId 和 json 名称不是对齐的,需要手动查看确定要修改的 json 文件(TODO 这里是个优化点)

  2. 找到 json 文件中的错误语句

    可以直接在当前的 json 文件中搜索即可, 一个对象对应一个 statement

  3. 修改 json 后提交 pr

    在 pr 中可以介绍下修改的原因

数据的更新

后续我会在合并完 pr 后更新线上数据库上的数据完成更新

常见问题

ReferenceError: Request is not defined

使用 pnpm devpnpm start 命令启动项目时,可能会出现 ReferenceError: Request is not defined 的错误

earthworm\node_modules\.pnpm\[email protected]_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\server\web\spec-extension\request.js:28
class NextRequest extends Request {
                          ^

ReferenceError: Request is not defined

这是由于 Node.js 版本较低导致的:

What version of Node.js do you use? If it is 16.x, or less, then you should set it to 18.x, assuming that none of the packages you are using, require lower Node.js versions.

详情参见这里:ReferenceError: Request is not defined · vercel/next.js · Discussion #47648

升级到 18.x 及以上即可解决问题

贡献指北

由于本地调试、修改项目时需要使用到 mysql 服务,这里我们可以只用 docker 跑个 mysql 服务

docker compose -f docker-compose-dev.yaml up -d

# 老版本 docker 兼容命令
docker-compose -f docker-compose-dev.yaml up -d

# 或者可以通过 package.json 的命令来启动
pnpm docker:mysql

然后顺序执行下列命令即可

pnpm install
pnpm db:init
pnpm dev

earthworm's People

Contributors

can1177 avatar cuixiaorui avatar danmosama avatar fengstats avatar henrytsz avatar hildxd avatar myltx avatar mynameszhazh avatar widdycai avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

earthworm's Issues

存在歧义性和提示缺失

  • 同一个中文翻译成英文可能存在多种写法,推荐将音标提示或者发音提示提前,不然会一直猜到正确答案出现 ;-)
    • the 的指向性比较模糊,单句中的 这个 比较容易想到 this 而不是 the,比较需要音标辅助
  • 建议添加提示:
    • 大小写输入敏感
    • 使用空格切换输入单元格

多语种README

目前只有中文版本,可以尝试编写多语种README。
我可以编写韩语版本。

重新设计跳过的功能

我们需要重新设计跳过的功能点

现在是失败三次自动显示答案

有的时候可能用户不想要看答案 还想在挑战挑战

所以我们加一个按钮吧

当用户输入失败 2次之后 显示跳转到答案按钮
点击按钮挑战到答案页面
不点击按钮的话 就一直在回答问题的页面

Uniform formatting rules

I fixed a styling error, but when I committed the code, I found a formatting difference in my modification file.
Can the owner provide a formatting configuration file, such as .prettierrc

初次体验,有5个小的改进意见

1.把每个“连词成句”的最终长句(中文),显示在上面,让大脑知道自己努力的方向,增加掌控感。
2.每完成一个长句,有一个奖励式的反馈,让大脑获得满足感,调整紧张节奏。
3.记录学习者的学习特点,比如时长等,我们可以根据反馈的数据在他累之前,且努力完成了一个小阶段后提示他暂时休息,比如放一首音乐冥想2分钟等。这个很重要,否则他每次离开时都是消极的(手累,心累)
4.此按钮的使用功能低频且容易误碰,且误碰后果极其严重(清零学习进度)。学生天性好奇会探索按钮,而且弹出来的对话框还是全英文的,更容易误碰
1
5.当我写错单词后下划线变红色,当我改正单词后,以及后面继续写单词,下划线一直是红色,给我的感觉是错误依然存在,但最后提交后是对的
2

通过空格播放单词的声音

what

用户希望可以在 question 页面也可以通过空格来播放句子的声音

image

也就是这个页面 按下空格播放声音

现状

现在的逻辑是可以在 answer 页面通过空格来播放声音的

image

why

那么在 question 页面可以播放声音的好处可以解决歧义性
比如 显示了一个中文 “不”, 那么答案有可能是 "no" 也有可能是 "don't "

那么这就产生的歧义 ,这时候如果可以让用户听到答案的英文声音 那么就可以解决这个歧义了

需要一个 logo

咱仓库的名称叫做 earthworm 中文是 蚯蚓

来表达“连词成句”的英语学习理念

现在咱需要一个 logo

我希望是一个卡通的小蚯蚓形象

大家集思广益下

或者推荐下可以生成卡通形象的网站

实现显示需要键入单词数量的下划线

我先花个设计图感受感受

image

中文”我喜欢你“ 对应英文是 ”I like you“

所以会显示 3个下划线

这么做的目的是可以给用户一个提示 告知他应该输入几个单词

通过空格来做到切换下划线

为什么需要通过空格呢?
思考一下在我们输入英文的时候 就是需要加上空格来分割单词 所以在我们的程序中也需要通过空格来模拟真实的使用场景

实现进度功能

类似于歌词的显示
image

我们可以放到左侧或者右侧
image

这个看的见的进度有以下几个好处:

  1. 用户可以知道自己刷了多少 statment 还剩下多少 statment
  2. 用户可以选择 statment ,比如点击第 30 个 �statment ,就会从第 30 个 statment 开始

我们要实现的功能:

  1. 基于播放的位置可以进行滚动
  2. 点击 statment 可以选择
  3. 底部有一个进度条显示

最终的样式UI 参考:

image

实现结算页面

当用户刷完当前course所有的 statments 之后

会显示一个结算页面

结算页面里面暂时只需要两个功能:

  1. 进入下一关的按钮
  2. 重来一次的按钮

点击这个按钮后 就可以继续下一个 course

样式上我们可以参考下 qwerty

image

https://qwerty.kaiyi.cool/

实现缓存进度

缓存当前课程和当前的statment

比如用户现在玩到了第2关 刷了第 10 个 statement

用户希望下次进到应用里面 还是第 2 关 第 10 个 statement 。 也就是继续之前的来


技术实现上 可以先存在用户的浏览器上

希望有一个回退上一句功能

每次发现有错误的句子时,想看前面的提示句子时,没有办法退回去。
以及看到中文意**不起来,然后tab看答案之后,想回去再输入一次,就没有办法处理

检测是否正确的时候支持忽略大小写

当用户点击回车后 检测输入的是否和答案一致
这里我们加上忽略大小写

比如
答案是 : The food
用户的输入: the food

这时候我们也可以判定是正确的

句子输入含有错误单词

课程位置:

  1. 第六课
  2. 第十课
  3. 第十一课

句子:

第六课

我们想要尽快知道问题的答案
we want to know the asnwer to the question as soon as possible

第十课

  • (我想要给你上一课) I want to teach you a lesson
  • (你必须给他上一课) you have to teach him a lesson

第十一课

  • (过去)是年轻的时候 she wanted to change the world when she was young
  • (过去)是年轻的时候 I talked with her last weekend and she told me she wanted to change the world when she was young

问题:

第六课

  • asnwer 应为 answer

第十课

  • 输入的答案多出一个空,正确英文答案前含有(我想要给你上一课) ,应去除中文
  • 输入的答案多出一个空,正确英文答案前含有(你必须给他上一课) ,应去除中文

第十一课

  • 输入提示句子缺少 (过去)是年轻的时候
  • 输入的答案多出一个空,正确英文答案前含有(过去)是年轻的时候 ,应去除中文

再来一次功能

两种构思

  1. tab切换
  • 出现题目,填入单词,发现单词忘记或部分无法想起,使用tab键切换出答案。
  • 再次tab键切换回题目页面,填入单词。
  • enter键,进入下一个题目
  1. if判断
  • 第一步两种情况

    1. 情况一:出现题目,填入单词,发现单词忘记或部分无法想起。按下enter进行判断,此时为false,出现答案。
    2. 情况二:单词输入正确,按下enter进行判断,此时为true,进行下一个题目。
  • 第二步两种设计

    1. 设计一:按下 ~ 键,答案页面消失,回到该题目页面,继续本次答题。
    2. 设计二:此时直接输入答案。按下键盘任意键时,答案页面消失,回到该题目页面,继续本次答题。

if
tab

  1. 其他:错误标记,空缺标记 ( 由再来一次功能,延伸的一些想法 )
    1. 错误标记

      • 出现题目,填入单词。所填单词错误,在错误单词进行高亮标记。
      • 错误单词,且在答案页面进行高亮标记
    2. 空缺标记

      • 出现题目,填入单词。发现单词忘记或部分无法想起,单词未填处,出现高亮。( !思考:可忽略功能。错误过多,打击信心。是否会影响学习积极性,在题目页面不进行高亮 )
      • 单词未填处,在答案页面进行高亮标记。

通过快捷键来播放单词的声音

通过快捷键来播放单词的声音
image
相当于点击声音按钮

但是用鼠标点击不符合我们“键盘侠”的风格
必须得要快捷键来播放 :)

快捷键暂时没想到用什么

大家有什么好的主意

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.