new random word

tianzeshi-study · May 19, 2024 · 3ddc513 · 3ddc513
1 parent 0193ff0
commit 3ddc513
Show file tree

Hide file tree

Showing 4 changed files with 251 additions and 204 deletions.
diff --git a/index.html b/index.html
@@ -3,9 +3,14 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Get User Input</title>
+  <link rel="stylesheet" href="styles.css">
+  <title>字母序列回忆任务</title>
 </head>
 <body>
+<h2>实验规则</h2>
+<p>请在正式实验前,选择正式试验和保存历史记录的复选框,以便实验后进行数据分析. 当准备好开始实验时,请点击开始按钮,按照以下规则进行答题.</p>
+<p>在按下开始键后你会听到一串字母序列的语音和一定长度的自然语音,之后你会听到一声短暂的中频提示音,请在听到中频提示音后,在输入框中重新输入听到的字母序列,并尽可能保证序列的正确性.</p>
+<p>预计有80个单词,请耐心答题以保障正确性.在第一轮实验任务完成后,可以适当休息,然后请刷新页面进行重测</p>
 <div> 
 <button onclick="playSound(700, 1);">正确提示音测试</button>
 <button onclick="playSound(450, 1.5);">开始作答提示音测试</button>
@@ -20,7 +25,10 @@
     </label>
 
 
-<div> <button onclick="start()">开始</button> </div>
+<div> 
+<button onclick="start()">开始</button> 
+<button onclick="outputHistory()">导出历史记录</button>
+</div>
 <!-- Result display area -->
 <div id="result"></div>
 
@@ -29,5 +37,7 @@
   <label for="userInput">Type the word you heard:</label>
   <input type="text" id="userInput" onkeydown="checkEnter(event)">
   <script src="script.js"></script>
+  <p>为了良好体验,请使用google chrome, firefox, microsoft edge 等主流浏览器</p> 
+  <p>&copy; 2024 tianzeshi_study. All rights reserved.</p>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -3,15 +3,15 @@ const resultDiv = document.getElementById('result');
 let words = []; // Array to store words from text file
 let currentIndex = 0; // Index to keep track of current word being read
 let answer = [];
-let inputHistory  = [];
+let inputHistory = [];
 let isWord = [];
 let randomWords = [];
 const preferenceCheckbox = document.getElementById('preferenceCheckbox');
 const saveHistory = document.getElementById('saveHistory');
 // 创建 AudioContext 对象
 var audioContext = new(window.AudioContext || window.webkitAudioContext)();
 
-let thisTrail = {}; 
+let thisTrail = {};
 // 检查本地存储中是否已存在列表
 let savedHistory = localStorage.getItem('savedHistory');
 
@@ -22,15 +22,14 @@ if (!savedHistory) {
     // 如果存在，则从本地存储中加载列表数据
     savedHistory = JSON.parse(savedHistory);
 }
-
+const lastTrail = savedHistory[savedHistory.length - 1];
 // 添加项目到列表
 function addItemToList(item) {
     savedHistory.push(item);
     // 更新本地存储
     localStorage.setItem('savedHistory', JSON.stringify(savedHistory));
 }
 
-
 // 检查是否按下回车键
 function checkEnter(event) {
     if (event.keyCode === 13) { // 检查是否按下回车键
@@ -93,7 +92,7 @@ function compareInput(input) {
     resultDiv.textContent = result;
     // if (result == 'Correct!') {
     if (result == true) {
-        console.log(currentIndex);
+        console.log(currentIndex -1 );
         playSound(700, 0.75);
         answer[currentIndex - 1] = true;
         setTimeout(function () {
@@ -123,9 +122,9 @@ function speakText(text, play) {
     // const utterance = new SpeechSynthesisUtterance(letters);
     utterance.rate = 1.5; // 将语速设置为原来的两倍
     utterance.onend = function () {
-        if (currentIndex < words.length) {
+        if (currentIndex <= words.length) {
             getUserInput();
-            if  ( play ==true) {
+            if (play == true) {
                 getUserInput();
                 playSound(400, 1.5);
                 console.log("单词时长：" + utterance.duration + " 秒");
@@ -158,38 +157,57 @@ function readNextWord() {
     if (currentIndex < words.length) {
         const letters = words[currentIndex].split('').join(' ');
         speakText(letters, false);
-        try{
-        // speakText(words[currentIndex], true);
-
-        const randomNumber = Math.floor(Math.random() * 2);
-    switch (randomNumber) {
-        // case 3:
-            // playSound(350, 1);
-            // speakText("emmmmmmm", true);
-            // break;
-        case 1:
-            speakText(words[currentIndex], true);
-            isWord[currentIndex - 1] = true;
-            // console.log("随机单词: ", randomWord);
-            break;
-        case 0:
-            const randomSequence = generateRandomLetterSequence(words[currentIndex].length);
-            speakText(randomSequence, true);
-            console.log("随机字母序列: ", randomSequence);
-            isWord[currentIndex - 1] = false;
-            randomWords[currentIndex - 1] = randomSequence;
-            break;
-        default:
-            console.log("未知操作");
-            break;
-    }
+        try {
+            // speakText(words[currentIndex], true);
+            if (!lastTrail) {
+                const randomNumber = Math.floor(Math.random() * 2);
+                switch (randomNumber) {
+                    // case 3:
+                    // playSound(350, 1);
+                    // speakText("emmmmmmm", true);
+                    // break;
+                case 1:
+                    speakText(words[currentIndex], true);
+                    isWord[currentIndex] = true;
+                    // console.log("随机单词: ", randomWord);
+                    break;
+                case 0:
+                    const randomSequence = generateRandomLetterSequence(words[currentIndex].length);
+                    speakText(randomSequence, true);
+                    console.log("随机字母序列: ", randomSequence);
+                    isWord[currentIndex] = false;
+                    randomWords[currentIndex] = randomSequence;
+                    break;
+                default:
+                    console.log("未知操作");
+                    break;
+                }
+            } else {
+                // isWord[currentIndex - 1]  =  lastTrail['isWord'][currentIndex - 1] === true ? false : true;
+                isWord[currentIndex] = !lastTrail['isWord'][currentIndex];
+
+                console.log("exist  last trail");
+                console.log("lastTrail is word :" + lastTrail['isWord'][currentIndex]);
+                console.log("thisTrail is word :" + isWord[currentIndex]);
+                if (isWord[currentIndex]) {
+                    speakText(words[currentIndex], true);
+                } else {
 
+                    const randomSequence = generateRandomLetterSequence(words[currentIndex].length);
+                    speakText(randomSequence, true);
+                    console.log("随机字母序列: ", randomSequence);
+                    // isWord[currentIndex - 1] = false;
+                    randomWords[currentIndex] = randomSequence;
 
+                }
 
-        }catch (error) {
+            }
+
+        } catch (error) {
             console.log(error.message);
-        } finally {
-        // playSound(450, 1.5);
+        }
+        finally {
+            // playSound(450, 1.5);
         }
         currentIndex++;
         // userInput = getUserInput();
@@ -201,18 +219,18 @@ function readNextWord() {
         thisTrail['answer'] = answer;
         thisTrail['inputHistory'] = inputHistory;
         thisTrail['isWord'] = isWord;
-thisTrail['randomWords'] = randomWords;         
+        thisTrail['randomWords'] = randomWords;
         if (saveHistory.checked) {
-        try{
-addItemToList(thisTrail);
-        } catch (error) {
-              console.log('An error occurred:', error.message);
-        }
-        resultDiv.textContent = "saved successfully .";
-        console.log("successfully saved!");
+            try {
+                addItemToList(thisTrail);
+            } catch (error) {
+                console.log('An error occurred:', error.message);
+            }
+            resultDiv.textContent = "saved successfully .";
+            console.log("successfully saved!");
         } else {
             console.log("history not saved");
-        }            
+        }
     }
 }
 
@@ -221,7 +239,6 @@ addItemToList(thisTrail);
 // };
 
 
-
 // 生成随机字母序列
 function generateRandomLetterSequence(length) {
     const letters = "abcdooaaiiieeeuuuaaaeeeiiiooouuehilmnoprst";
@@ -231,4 +248,22 @@ function generateRandomLetterSequence(length) {
         result += letters[randomIndex];
     }
     return result;
-}
+}
+
+function outputHistory() {
+    const textContent = localStorage.getItem("savedHistory");
+
+    // 创建一个新的 Blob 对象，将文本内容放入其中
+    const blob = new Blob([textContent], {
+        type: "text/plain"
+    });
+
+    // 创建一个下载链接
+    const downloadLink = document.createElement("a");
+    downloadLink.download = "output.json"; // 下载文件的名称
+    downloadLink.href = window.URL.createObjectURL(blob);
+
+    // 点击链接以下载文件
+    downloadLink.click();
+
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,80 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 20px;
+}
+
+h2 {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+p {
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+button {
+  font-size: 16px;
+  padding: 8px 12px;
+  margin-right: 10px;
+  border: none;
+  background-color: #f0f0f0;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #e0e0e0;
+}
+
+label {
+  font-size: 16px;
+  display: block;
+  margin-bottom: 10px;
+}
+
+input[type="checkbox"] {
+  margin-right: 5px;
+  cursor: pointer;
+}
+
+#result {
+  margin-top: 20px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+label[for="userInput"] {
+  font-size: 16px;
+  display: block;
+  margin-top: 20px;
+}
+
+input[type="text"] {
+  font-size: 16px;
+  padding: 8px 12px;
+  width: 300px;
+  margin-top: 10px;
+}
+
+p:last-child {
+  font-size: 14px;
+  margin-top: 40px;
+}
+
+p:last-child a {
+  color: #333;
+  text-decoration: none;
+}
+
+p:last-child a:hover {
+  text-decoration: underline;
+}
+
+p:last-child::before {
+  content: "© ";
+}
+
+p:last-child::after {
+  content: " tianzeshi_study All rights reserved.";
+}