這是用來開給我朋友用的，所以是自用用途。它是一份心理學相關的研究問卷，想探討情緒與書寫之間的關聯。因為研究需要對控制某些頁面的書寫時間，而 Google 表單和市面上常見的表單沒辦法做到，因此就有了這個專案。目前這個專案主要希望能達到的功能有
- 傳送在問卷的資料，透過 google app scripts，將資料儲存在 google spreadsheet
- 問卷能換頁作答，submit 後的個頁資料會是同一筆資料
- 在部份頁面需要計時功能，要時間到才能進行下一題
- 表單驗證功能
附上方便自己即時修改的 CodePen 連結
該專案網頁網址
Google app script 內容和資料庫連結，等日後有機會再附上
想讓計時器按鈕不再被重複觸發
- 因為重複點擊按鈕的話，會讓計時變快，而時間是我想要控制的。又因為 display:none 和 visibility:hidden 好像無效，就往禁用按鈕的方式去想
- 如何讓 button 只能點擊一次_慕課問答
- 讓你的按鈕只能按一次，避免重複送出
- 用 js 實現只能點擊一次的按鈕的功能 - 逍遙峽谷
- jQuery 實現按鈕只點擊一次後就取消點擊事件綁定的方法，jquery 綁定_Javascript | 幫客之家
- jquery 如何實現一個按鈕只能點擊一次，再點擊就無效？ - CSDN 博客
- 簡單的監聽 DOM 事件
- 【JavaScript】Event Listener 監聽事件一覽 – Ian
document.getElementById("Start").disabled=true;
防止觸發 Enter
- 因為誤觸 Enter 的話，表單直接送出，後面的題目就填不到了
- HTML 防止 input 回車提交表單 - CSDN 博客
- 在 form 表單或 input 中加入：
onkeydown="if(event.keyCode==13){return false;}" - 【茶包射手日記】網頁 Enter 鍵誤擊刪除鈕疑雲 - 黑暗執行緒
- [JavaScript] 解決使用新注音輸入時選字按 Enter 會送出的問題 @ 長島冰茶的工程師筆記 :: 痞客邦 ::
- Press Enter to Submit 背後的那些事 « David Chen's Blog
- Re: [請益] 表單按 Enter 會送出的問題~ - 看板 PHP - 批踢踢實業坊
- 網頁按 enter 觸發 submit 事件 - stbird 的創作 - 巴哈姆特
- 表單提交 (submit) 時使用 preventDefault 可能產生的問題
- jQuery 阻止 input 按 Enter 就送出表單 (form) | Web Development Notes
- MooGoo's Blog: HTML 的 input 直接按 Enter 就送出表單
- XYZ 的筆記本: HTML form 只有一個 text input 時，在 input 上按 enter 會自動送出表單
- 關於 JavaScript 的那些事: JavaScript 裡 which、keyCode、charCode 的差別
- charCode 事件屬性 | 菜鳥教程
- DOM 原生的 event.keyCode 和 event.charCode - 簡書
必選題，表單驗證
- 請問 form 的 html 語法問題 | Yahoo 奇摩知識 +
- JavaScript 表單驗證
- javascript 取得 radio 的值 | [lifeIs: tooShort to: waste]
- 表單選項按鈕 radio buttons - 網頁設計教學站
- [筆記] 用 javascript 來取得表單元素內容的值 (javascript 取值) ~ PJCHENder
那些沒告訴你的小細節 - Java 程式教學甘仔店: [JavaScript] 取得 input 的 value
- IE 和 Edge 沒辦法直接讀 form 的 value ... orz
- jquery - Javascript document.forms value does not work for Internet Explorer - Stack Overflow
function check_page1(){
var page1_alert = "請填入資料";
var page1_value = document.getElementById("input_page1").value
if(page1_value=null || page1_value==""){
alert(page1_alert);
return false;
}
else{
hide(page1);
show(page2);
}
}
function check_page2(){
var page2_alert = "請點擊選項";
var mood1_value = document.getElementById('myForm').mood_1.value
var arousal1_value = document.getElementById('myForm').arousal_1.value
if( mood1_value && arousal1_value ){
hide(page2);
show(page3_guide);
}
else{
alert(page2_alert);
return false;
}
}
function check_page4(){
var page4_alert = "請點擊選項";
var mood2_value = document.getElementById('myForm').mood_2.value
var arousal2_value = document.getElementById('myForm').arousal_2.value
if( mood2_value && arousal2_value ){
document.getElementById("myForm").submit()
}
else{
alert(page4_alert);
return false;
}
}- 用 bootstrape 美化介面
-
HTML 模板
-
參考 gulp ejs
- 正則表達式驗證 email
- [Javascript] Regular Expression – Email 表單驗證 - iT 邦幫忙：：一起幫忙解決難題，拯救 IT 人的一天
- 筆記｜Javascript 正規表達式 #1 - Email 驗證 - Dez.tw
- web 前端之如何書寫正則表示式
- 郵箱 / 郵件地址的正則表達式及分析 (JavaScript，email，regex) - 掘金
- regex - How to validate an email address in JavaScript? - Stack Overflow
- Regulex：JavaScript Regular Expression Visualizer
- uneditable input demo
- Google 中文字體
- 置中頁面
- 感謝 taker 的切版祕笈，剛看完就派上用場了
- 修改成標準的 html 頁面
- 檢查網站是否通過 HTML5 驗證？ - 香腸炒魷魚 * 第一次檢查有 86 個 error + warning，嚇死人了 XD
- https://i.imgur.com/xapy4OR.png
- https://i.imgur.com/1tqbrUk.png
- 修改指導語
- 新增展開說明 (與換頁功能手法相似)
- 倒數計時後自動跳轉下一頁
- 隱藏 input，把被隱藏的某個 name 的 input 的 value 傳出去
input type=hidden
- 用 JS submit form
- HTML DOM submit() 方法
document.getElementById("myForm").submit()
- 必填的項目沒勾選，會無法進行下一題
- 禁用 Enter 送出表單
- HTML 防止 input 回車提交表單 - CSDN 博客
- 在 form 表單或 input 中加入：
onkeydown="if(event.keyCode==13){return false;}"
- 點擊按鈕一次後就禁用按鈕，避免重複輸入指令
- 透過隱藏、顯示 div 區塊，達成換頁效果
document.getElementById("p1").style.display="none";
- 加入九點量表(label)、插入圖片，完成訂一版
- 倒數計時，在某頁需要限制作答時間
- 抓日期，寫進資料庫方便排序與除去無效資料
- 建立簡單的 form 範本
- 用 google app scripts 接收 form 資料
- 把資料寫進 google spreadsheet
- 找能放前端程式碼的地方: ghpage, codepen