這是一份我幫我表姐做的問卷 還蠻有趣的
有請空幫忙填一下 只有四題 絕對不會花超過你60秒的時間
先謝謝各位啦
問卷網址在
http://5566.appspot.com/download/Liu-Yi-Hua/survey0225.htm
這問卷題目很少很簡單 平均大概30秒以內可以做完
會幫忙做的原因是因為有個特殊需求很有趣 就是要使用者畫出心目中完美的矩形
不然一般簡單的選擇或問答題用google doc內建的表單功能隨便拉一拉就完成了
google問卷本身設計的很陽春 除了讓你輸入題目以外其實沒什麼改動的空間
所以要運用到一點程式的技巧 這裡講解一下製做的過程:
首先用google doc新開一份表格文件
然後填入所要的問題和選項
要畫圖的部份先打好題目 然後答案的部份先選用文字類型
到這裡應該都很簡單 網路已經上有很多教學了 (我之前也有寫一篇類似的教學: 在google sites協作平台上辦投票並顯示圖形化結果 )
重點是再來是要程式處理的部份 要有些基本的html網頁設計概念
預覽剛剛做好的問卷表格網頁 然後把網頁用"檔案->儲存原始碼"存到本機中
由於google doc本身功能很陽春只能編輯文字的題目 所以如果我們想要在問卷中插入一些自己的圖片來說明或裝飾的話
先用網頁編輯器打開剛剛的原始碼 找到那幾個題目的位置
然後用
標籤把圖片版的說明 範例那些內嵌進去 (圖片事先截取出來成jpg圖檔放在跟html原始碼同一層資料夾)
然後是矩形繪圖的部份 我是用javascript去實做的
引用YUI的套件可以省下許多時間
要學習YUI的相關文件請參考 http://developer.yahoo.com/yui/index.html
我是使用其中的resize function 請參考 http://developer.yahoo.com/yui/resize/
寫好矩形的繪製之後 記得要註冊endResize事件 用意是讓使用者拖拉完矩形後會自動把一些相關數值計算出來 再用getElementByID填到本來問卷的文字答案框裡 (本來文字答案框記得在html碼裡更改屬性readonly="readonly" 這樣可以防止使用者直接改到文字答案框的值)
像本問卷中的第二題是 矩形的繪製 所以endResize後紀錄寬和高下來就行
第四題是矩形切割
做法是外框先用一個不能改變大小的矩形固定住
內框用一個比較小的可變大小矩形
當使用者移動完後會算出:
左邊矩形的寬度 ===> (可變矩形本身的寬)
右邊矩形的寬度 ===> (大矩形寬度 - 可變矩形本身的寬)
然後記得把可變矩形本身的高度設成固定 以免使用者動到
最後也是一樣把量化的結果填到第四題的回答文字框裡就行了
說穿了 主要的原理就是用javascript提供使用者繪圖的功能
但是並不真的把圖片存下來 而是轉成可量化的資訊再紀錄回google doc中
在本機預覽確定已經把html原始碼改好後 連同html網頁和那些圖檔再上傳到自己的網路空間就行了
有個進階的小技巧分享給大家:
統計資料回傳的位置是原始碼裡的form action決定的
如果要分開統計結果記得要把action的位置改成你要儲存的google文件的位置即可
舉例來說 如果要做中英文版本的問卷 問卷題目都一樣 就不用重新再從頭做一次英文版的
只要複製一份剛剛改好的中文版 用html編輯器打開 取代其中中文的部份變英文即可
如果要中英文兩版的統計結果都在同一份google spreadsheet中 那就中英文版中的form action都設同樣位置即可 這樣就可以做多國語言的問卷了 不管有幾國語言 所有的結果還是會列在同一份google spreadsheet中
相對的如果要中英文兩版的統計結果分開 那就要將中英文版中的form action各自指向到不同的google spreadsheet
希望會對大家有幫助
本篇問卷的即時統計結果 有興趣的可看看:
http://spreadsheets.google.com/ccc?key=0AuJZaYxu-eBZdEJ1SjhjRlgtMXVveXNZZ3Y2VVBlMFE&hl=zh_TW
相關文章:
在google sites協作平台上辦投票並顯示圖形化結果 http://blog.wahahajk.com/2009/05/google-sites.html
msn即時熱線 範例教學 http://blog.wahahajk.com/2008/06/msn_14.html
有請空幫忙填一下 只有四題 絕對不會花超過你60秒的時間
先謝謝各位啦
問卷網址在
http://5566.appspot.com/download/Liu-Yi-Hua/survey0225.htm
這問卷題目很少很簡單 平均大概30秒以內可以做完
會幫忙做的原因是因為有個特殊需求很有趣 就是要使用者畫出心目中完美的矩形
不然一般簡單的選擇或問答題用google doc內建的表單功能隨便拉一拉就完成了
google問卷本身設計的很陽春 除了讓你輸入題目以外其實沒什麼改動的空間
所以要運用到一點程式的技巧 這裡講解一下製做的過程:
首先用google doc新開一份表格文件
然後填入所要的問題和選項
要畫圖的部份先打好題目 然後答案的部份先選用文字類型
到這裡應該都很簡單 網路已經上有很多教學了 (我之前也有寫一篇類似的教學: 在google sites協作平台上辦投票並顯示圖形化結果 )
重點是再來是要程式處理的部份 要有些基本的html網頁設計概念
預覽剛剛做好的問卷表格網頁 然後把網頁用"檔案->儲存原始碼"存到本機中
由於google doc本身功能很陽春只能編輯文字的題目 所以如果我們想要在問卷中插入一些自己的圖片來說明或裝飾的話
先用網頁編輯器打開剛剛的原始碼 找到那幾個題目的位置
然後用
然後是矩形繪圖的部份 我是用javascript去實做的
引用YUI的套件可以省下許多時間
要學習YUI的相關文件請參考 http://developer.yahoo.com/yui/index.html
我是使用其中的resize function 請參考 http://developer.yahoo.com/yui/resize/
寫好矩形的繪製之後 記得要註冊endResize事件 用意是讓使用者拖拉完矩形後會自動把一些相關數值計算出來 再用getElementByID填到本來問卷的文字答案框裡 (本來文字答案框記得在html碼裡更改屬性readonly="readonly" 這樣可以防止使用者直接改到文字答案框的值)
像本問卷中的第二題是 矩形的繪製 所以endResize後紀錄寬和高下來就行
第四題是矩形切割
做法是外框先用一個不能改變大小的矩形固定住
內框用一個比較小的可變大小矩形
當使用者移動完後會算出:
左邊矩形的寬度 ===> (可變矩形本身的寬)
右邊矩形的寬度 ===> (大矩形寬度 - 可變矩形本身的寬)
然後記得把可變矩形本身的高度設成固定 以免使用者動到
最後也是一樣把量化的結果填到第四題的回答文字框裡就行了
說穿了 主要的原理就是用javascript提供使用者繪圖的功能
但是並不真的把圖片存下來 而是轉成可量化的資訊再紀錄回google doc中
在本機預覽確定已經把html原始碼改好後 連同html網頁和那些圖檔再上傳到自己的網路空間就行了
有個進階的小技巧分享給大家:
統計資料回傳的位置是原始碼裡的form action決定的
如果要分開統計結果記得要把action的位置改成你要儲存的google文件的位置即可
舉例來說 如果要做中英文版本的問卷 問卷題目都一樣 就不用重新再從頭做一次英文版的
只要複製一份剛剛改好的中文版 用html編輯器打開 取代其中中文的部份變英文即可
如果要中英文兩版的統計結果都在同一份google spreadsheet中 那就中英文版中的form action都設同樣位置即可 這樣就可以做多國語言的問卷了 不管有幾國語言 所有的結果還是會列在同一份google spreadsheet中
相對的如果要中英文兩版的統計結果分開 那就要將中英文版中的form action各自指向到不同的google spreadsheet
希望會對大家有幫助
本篇問卷的即時統計結果 有興趣的可看看:
http://spreadsheets.google.
相關文章:
在google sites協作平台上辦投票並顯示圖形化結果 http://blog.wahahajk.com/2009/05/google-sites.html
msn即時熱線 範例教學 http://blog.wahahajk.com/2008/06/msn_14.html
發表文章
15 意見:
張貼留言請問如何把圖片jpg加進去，可以再進一步詳細說明嗎???謝謝!!!
預覽剛剛做好的問卷表格網頁 然後把網頁用"檔案->儲存原始碼"存到本機中
打開html檔 在相對應位置插入圖片的html語法
例如
< img src="a.jpg">
像這樣
那個"a.jpg"就是要自己預先準備存好的jpg圖檔囉
最後完成時記得圖檔也要上傳到網路空間中 這樣別人看此份html就可以看到自訂的圖
你好, 我試了一下, 發現有個function 是如果沒有填那些一定要填的空格就按提交, 會轉回google 那沒有修改的地方, 這個有沒有辦法改呢?? 謝謝~
google原版的表單是提交後才檢查的 所以server發現沒填完就會自己轉回原版自己的頁面
解決的方法就是在submit onclick之前先用javascript寫檢查函式來檢查囉
確定都有填完才submit出去
請問一下...如果我把HTML網頁與內嵌的圖片傳到自己的空間,那麼我還能靠GOOGLE文件統計問卷資料甚至是將資料轉完圖形嗎?這部份有點不太能理解清楚。
這些資訊對我很有幫助，我也利用這些概念自行編製html問卷，把圖加上去，且請朋友幫忙解決Java Script的問題，
http://intertest2.itri.org.tw/socialebay/questionnaire.htm
需在form tag 後onsubmit="return chk(this);" 還有最後的Script要加上function chk(theform)那一大串，可幫忙檢查未填的題號才送出。
我已將放入圖檔的表單html檔修完成
請問該如何將此html檔上傳至網路呢?
你要去買個網路空間或是去找免費的網路空間來放
若你是學生的話 大部份學校都會提供網路空間放靜態網頁
請問所謂的免費網路空間可以使用dropbox嗎?謝謝
您好，
請問當按下送出之後，如果選擇"返回表單"，如何讓畫面跳到下面這一頁呢?
http://spreadsheets.google.com/viewform?formkey=dEJ1SjhjRlgtMXVveXNZZ3Y2VVBlMFE6MA&theme=0AX42CRMsmRFbUy0wYjVlZjc1Mi00ZmQ1LTQ1YTktOWUyMC05M2IxMzljNTJkOTQ&ifq
*本頁無法使用繪圖功能 若您是因為必填項目沒有填妥因此被導向到這頁面 請返回至http://5566.appspot.com/download/Liu-Yi-Hua/survey0225.htm繼續填寫 謝謝*
by the way，剛剛測試了dropbox，OK可以用。
><''不好意思唷
請問一下,我的問卷答題時都沒問題
但是回應的資料出現''空白題''(例如:9~12題全部答題者都是空白....)
想不透是哪裡的問題...https://spreadsheets.google.com/viewform?hl=zh_TW&formkey=dG00Z19pcnVRQnlpdlpCOU9oYzlVNGc6MQ#gid=0
To 小Co:
因為你的標題打錯囉!!
你把你的標題打在"題目說明"的地方
而本來"題目標題"的部份你沒填
所以最後資料出來就是顯示"無標題的問題"囉
http://goo.gl/gIJ0I
我照你說的下載後用Dreamweaver打開，結果欄位那些都跑掉了...
請問你說的網頁編輯器是甚麼軟體?
這樣上傳到自己的網頁空間google還能算出結果嗎?
您好
是否可以請問您，當問卷做完以後，如何跳至所指定的頁面呢？
我不知道該怎麼做才能像您一樣，提交問卷之後，會跳到指定頁面？
你好請問一下，如果我想要在問卷中嵌入圖片，將他存入本機後，可以再丟回原來google doc的位置嗎？
還有我的圖片可以是原先保留在網路上的網址嗎？
謝謝你
張貼留言