refactor: enhance get-started quest

app/src/components/MarkdownText.vue

@@ -31,11 +31,31 @@ const html = computed(() => {
 .markdown-content :deep(ol) {
   list-style: decimal;
   padding-left: 1em;
+  line-height: 1.2;
 }
-.markdown-content :deep(code) {
+.markdown-content :deep(ul) {
-  background-color: #282a33;
+  list-style: disc;
+  padding-left: 1em;
+  line-height: 1.2;
+}
+.markdown-content :deep(pre) {
+  background-color: #2e3440;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  font-size: 0.9rem;
+  color: #d8dee9;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #4c566a;
+  line-height: 1.5;
+  font-family: 'monospace';
+}
+
+.markdown-content :deep(code:not(pre code)) {
+  background-color: #2e3440;
   border-radius: 0.25rem;
-  padding: 0.25rem;
+  padding: 0.2rem 0.4rem;
-  font-size: 0.875rem;
+  font-size: 0.9rem;
+  color: #d8dee9;
+  font-family: 'monospace';
 }
 </style>

quests/cast/answer.sh

@@ -1,3 +0,0 @@
-echo start
-echo example
-echo How are you

quests/cast/game.yml

@@ -1,64 +0,0 @@
-id: cast
-image: base
-title: 輸出文字
-instruction: |
-  在這個關卡中，你將會學到：
-  1. 如何使用 `echo` 在終端機上顯示文字。
-
-requirements:
-  - get-started
-
-stages:
-  - id: start
-    name: 按下 `開始` 按鈕開始
-    condition:
-      command: ^echo start$
-    response:
-      content: |
-        還記得第一關使用的指令 `echo` 嗎？
-        `echo` 指令可以將後方接續的文字輸出到終端機上。
-        例如你輸入 `echo Hello`，終端機就會顯示 `Hello`。
-        你可以試著輸入 `echo ` 並在後面加上一些文字，然後按下 Enter 鍵，就可以看到終端機上顯示了你剛才輸入的文字。
-      hint: |
-        輸入 `echo` 並在後面加上一些文字
-        例如：`echo example`
-
-  - id: echo
-    name: 在終端機上顯示顯示任意文字
-    requirements:
-      - start
-    condition:
-      command: ^echo .*
-    response:
-      content: |
-        你應該可以看到終端機上顯示了你在 `echo` 指令後面的文字。
-        接下來，請你試著在終端機上顯示 `How are you?`。
-      hint: |
-        輸入 `echo How are you?`
-
-  - id: END
-    name: 在終端機上顯示 `How are you?`
-    requirements:
-      - echo
-    condition:
-      command: ^echo [Hh]ow are you\??$
-    exceptions:
-      - id: missing_echo
-        condition:
-          command: ^[Hh]ow are you\??$
-        response:
-          type: narrative
-          content: |
-            在 `How are you?` 前面必須加上 `echo`
-      - id: incomplete_command
-        condition:
-          command: ^echo$
-        response:
-          type: narrative
-          content: |
-            在 `echo ` 後面還需要加上 `How are you?`
-    response:
-      content: |
-        你成功的在終端機上顯示了 `How are you?`。
-        相信你已經了解如何使用 `echo` 指令來顯示文字了。
-        之後如果要在終端機顯示文字，記得可以使用 `echo` 指令。

quests/get-started/game.yml

@@ -3,9 +3,11 @@ image: base
 title: 終端機的基本知識
 instruction: |
   歡迎來到 Linux Odyssey！
+  這個關卡是為了讓你熟悉終端機的基本操作。
   在這個關卡中，你將會學到：
   1. 如何使用這個網站
   2. 如何使用終端機
+  3. 如何使用 `echo` 指令
 
 stages:
   - id: start
@@ -14,14 +16,11 @@ stages:
       command: ^echo start$
     response:
       content: |
-        在畫面的中下方的區塊是終端機，你可以在終端機裡輸入指令來操作電腦。
+        嗨，勇敢的冒險者！
-        在終端機中，你所看到的 `commander:~ $` 叫做命令提示字串。
+        歡迎來到 Linux Odyssey！這是一場充滿終端機魔法的冒險之旅。
-        命令提示字串最後的錢字號 `$` 叫命令提示符，你必須將指令輸入在它的後方。
+        終端機就像是你的魔法杖，讓你用**文字咒語**來操控電腦，這可是成為程式大師的必備技能哦！
-        當你輸入完指令並按下 Enter 之後，終端機會執行你輸入的指令，並且會從終端機的下一行開始輸出指令的執行結果。
+        在畫面中下方的區域就是你的魔法舞台——終端機，準備好施展你的第一個咒語了嗎？
-        直到你看到新的 `commander:~ $` 出現時，代表你可以輸入下一個指令了。
+        現在，請在下方輸入 `echo hello`，然後按下 Enter 鍵，看看會有什麼神奇的事情發生吧！
-        現在請你輸入 `echo hello` 來看看會發生什麼事。
-      hint: |
-        在 `commander:~ $` 後面輸入 `echo hello` 並按下 Enter
 
   - id: echo-hello
     name: 在終端機輸入 `echo hello`
@@ -31,17 +30,25 @@ stages:
       command: ^echo hello$
     response:
       content: |
+        恭喜你完成了你的第一個指令！
         你應該可以看到終端機上顯示了以下內容：
         ```
         commander:~ $ echo hello
         hello
         ```
-        第一行的 `commander:~ $` 是命令提示字串，接在後方的 `echo hello` 是你輸入的指令。
+        看到 `commander:~ $` 的時候，代表電腦在等你輸入指令。
-        第二行的 `hello` 則是終端機的輸出結果。
+        當你輸入 `echo hello` 後，電腦就會在下一行回答「hello」。
-        你現在知道了如何在終端機上輸入指令，以及查看終端機輸出的位置。
+
-        現在請輸入 `echo next` 來繼續下一個步驟。
+        指令就像是告訴電腦要做什麼的句子。
+        就像 `echo hello` 這個指令：
+        - `echo` 是在告訴電腦「請你說出」
+        - `hello` 是要電腦說的內容
+        所以當你輸入 `echo hello` 時，電腦就會說出「hello」。
+
+        好的，那接下來，請你試試讓終端機顯示 `next` 這個字串。
+        如果遇到困難，可以按下 `提示` 按鈕來獲得提示。
       hint: |
-        輸入 `echo next` 繼續下一個步驟
+        請輸入 `echo next` 來繼續下一個步驟。
 
   - id: echo-next
     name: 在終端機輸入 `echo next`
@@ -51,14 +58,11 @@ stages:
       command: ^echo next$
     response:
       content: |
-        `Ctrl + C` 在終端機中是一個很重要的快捷鍵，它可以用來中斷正在執行的指令，並產生一個新的命令提示字串，讓你可以繼續輸入指令。
+        恭喜你學會了如何使用 `echo` 指令。
-        如果指令執行很久沒有反應，或你因為其他原因想要中斷指令，你可以按下 `Ctrl + C` 來中斷指令。
+        你可能會好奇，為什麼我們需要有這樣的指令。
-        又或者你輸入了錯誤的指令，卻懶得慢慢刪除，你也可以按下 `Ctrl + C` 來產生新的命令提示字串重新輸入指令。
+        雖然 `echo` 指令是個很簡單的指令，但它卻是許多指令的基礎。
-        如果你已經理解了剛才的說明，請輸入 `echo finish` 來結束這一關。
+        在我們的冒險中，也常會使用 `echo` 指令來觸發事件。
-      hint: |
+        那麼我們這個關卡就到此為止，請你輸入 `echo finish` 來結束這個關卡。
-        按下 `Ctrl + C` 能夠中斷正在執行的指令
-        按下 `Ctrl + C` 能夠產生新的命令提示字串
-        輸入 `echo finish` 來結束這一關
 
   - id: END
     name: 結束關卡
@@ -69,3 +73,4 @@ stages:
     response:
       content: |
         恭喜你，你已經完成了這個關卡！
+        你已經學會了如何使用 `echo` 指令，並且了解了它的用途。