次にやること メモ
アンケートを取ったら,次にやることはグラフ表示。
そこまでできたら本当に授業に生かせる気がする。
単純に記録やアンケートを取るだけならもう対応可能なとこまできたわけですが,グラフはまた別の話ですね。
HTML+JavaScriptという範囲でなら選択肢は非常に多そうでした。
できるだけプラグイン等を少なくしたい,という中で考えた場合で
この二つがとても気に入りました。すごくいい。
でも,HTAで動くか,と試してみたところ,うまくいきません。。むうぅ。
出力にブラウザを使うのはかまわないため,JScriptでローカルデータを吸い上げてブラウザに渡せばいいから
使えないといえません。
でも,できるならHTAの画面だけで勝負はできないか,いろいろと試しています。
そのまま使えるものはあんまりないぽいんですが,
meta文に
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
とすれば動くものがいくつかありました。
ちょこっとずつ変えたらけっこう動いてくれるっぼい。
これにいろいろ書き出しながら確認,編集をすると次々と動き出しました。ヽ(*´∇`)ノ
やる気がまたデテキタ(゚▽゚*)
簡単にあきらめるものではないね。 きっちり形になったら,また記事にしたいと思います。
Windows7の環境が自宅にはないんですが,電子黒板がWindows7なのが,とても脅威 (((ノ)゜Д゜(ヽ))))
追記
plot.ly
plotly.jsがものすごくいい。職場で使えるか確認した後本格的に扱ってみようと思います。
これがもし使えるなら・・スゴソウダ。
アンケート とりあえずできた
今日一日でかなり進んだ。
久々に一日の大半を使ってやってた気がします。
Excelのブックを貼れないのが残念ですが,まぁやってみます。
Excelには二つのシートを作ります。 アンケートシート と コード と名前をつけます。
アンケートシート はこんな感じ
セル b1の値がタイトルに
セル a4から 設問
セル b4から 種別 入力規則で select check radio text multi に制限しています。
セル c4からが選択肢です 連番は 1-41 のように書く,選択肢の場合は,(半角カンマ)区切りで
do loopでa列に空白がでるまで見ているので,けっこうアバウトです。
コード にはつぎのを貼ります。
<!doctype html> <html> <head> <meta charset="utf-8"> 【タイトル】 <style type="text/css"> table{border-collapse: collapse;} table,tr,td{border: solid 2px black;} td.clsmondai{padding-left: 5px;font-weight: bold;background-color: black;color: white;width:400px} td.clskaito{padding-left: 20px;background-color: antiquewhite} </style> <script> var ForReading = 1; var ForWriting = 8; var p=[ 【パラメータ配列】 ] var thisName=location.pathname thisName=thisName.slice(thisName.lastIndexOf("\\")+1,thisName.lastIndexOf(".")); var fso = new ActiveXObject("Scripting.FileSystemObject"); if (fso.FolderExists(".\\data")==false) fso.CreateFolder(".\\data"); var DataFile = ".\\data\\"+thisName+"data.txt"; if (fso.FileExists(DataFile)==false){ var data = fso.OpenTextFile(DataFile, ForWriting,true); var tmp="user" for (var i=0;i<p.length;i++){tmp+="◇"+p[i][1]} tmp+="◇Date" data.WriteLine(tmp); data.Close() } var User=new ActiveXObject("WScript.Network").UserName; //ベタ打ちここまで function init(){ resizeTo(500,600); makeForm() } function renban(s,e){ var arr=[] for (var i=s;i<=e;i++) arr.push(i) return arr } function makeForm(){ var tmp=[] tmp.push("<table>") for(var i=0;i<p.length;i++) tmp.push(makeElement(i)) tmp.push("</table>") document.getElementById("table").innerHTML=tmp.join("") } function makeElement(No){ var mondai=p[No][1] var name="No"+(No) var type=p[No][2] var arr=p[No][3] var html=[]; var tmp; switch(type){ case "select":tmp = makeSelectElement(name,"select",arr);break case "radio":tmp = makeSelectElement(name,"radio",arr);break case "check":tmp = makeSelectElement(name,"checkbox",arr);break case "text":tmp="<input type='text' name='" + name + "' size='45' />";break case "multi":tmp="<textarea name='" + name +"' rows='5' cols='46' ></textarea>";break } html.push("<tr><td class='clsmondai'>" + (No+1) + " " + mondai + "</td></tr>") html.push("<tr><td class='clskaito'>") html.push(tmp+"</td>") return html.join("") } function makeSelectElement(name,type,arr){ switch(type){ case "select": var tmp=[] tmp.push("<select name='" + name +"'>") for(var i=0;i<arr.length;i++){tmp.push("<option value='" + arr[i]+"'>"+arr[i]+"</option>")} tmp.push("</select>") element=tmp.join("") break case "radio": case "checkbox": //間違いじゃないよ var tmp=[] for(var i=0;i<arr.length;i++){ tmp.push("<input type='"+ type +"' name='" + name + "' value='" + arr[i] +"'>"+arr[i]+"<br>") } element=tmp.join("") break } return element } // データ収集部分 function result(){ var html=[] html.push(User+"◇") for (var i=0;i<p.length;i++){ html.push(getData("No"+i,p[i][2])+"◇") } html.push(Date()) return html.join("") } function PostData(str){ var fso = new ActiveXObject("Scripting.FileSystemObject"); var data = fso.OpenTextFile(DataFile, ForWriting); data.WriteLine(result()); data.Close(); document.forms[0].reset() } function getData(name,type){ switch(type){ case "radio": case "check": return getCheck(name); break; case "text": case "multi": case "select": return document.getElementsByName(name)[0].value.replace(/\r?\n/g,"_"); break; } } function getCheck(name){ var CHECK=document.getElementsByName(name) var tmp="" for(var i=0;i<CHECK.length;i++){ if(CHECK[i].checked) tmp+="_" +CHECK[i].value } return tmp.substring(1) } </script> </head> <body onload="init()"> <form id="formFld"> <div id="table"></div> <input type="button" href="#" value="送信する" onClick="PostData()"/> </form> </body> </html> [END]
wordに一度貼ってからexcelに貼るといいかも。 最後の[END]は大事です。
これがないと永久ループに・・ DoEventsは入れてるので止めてあげればいいですが。
HTAを吐き出すコードが次
Sub MakeHTAFile() Dim CodeSheet As Worksheet: Set CodeSheet = ThisWorkbook.Worksheets("コード") Dim ConfigSheet As Worksheet: Set ConfigSheet = ThisWorkbook.Worksheets("アンケートシート") Dim ADODBStream As Object Set ADODBStream = CreateObject("ADODB.Stream") With ADODBStream .Charset = "UTF-8" .Open End With Dim i, j, k, tmp, tmp2, tmp3 i = 1 Do Select Case CodeSheet.Cells(i, 1) Case Is = "【タイトル】" ADODBStream.writetext "<title>" & ConfigSheet.Cells(1, 2) & "</title>", 1 Case Is = "【パラメータ配列】" j = 1 Do While ConfigSheet.Cells(j + 3, 1) <> "" tmp = ConfigSheet.Cells(j + 3, 3) If InStr(tmp, ",") > 0 Then tmp2 = "['" & Replace(tmp, ",", "','") & "']" If InStr(tmp, "-") > 0 Then tmp2 = "renban(" & Split(tmp, "-")(0) & "," & Split(tmp, "-")(1) & ")" '数式に,が出るから上のコードとの順番注意 If tmp = "" Then tmp2 = "''" tmp3 = " [" & j & ",'" & ConfigSheet.Cells(j + 3, 1) & "','" & ConfigSheet.Cells(j + 3, 2) & "'," & tmp2 & "]," If ConfigSheet.Cells(j + 3 + 1, 1) = "" Then tmp3 = Left(tmp3, Len(tmp3) - 1) ADODBStream.writetext tmp3, 1 j = j + 1 Loop Case Else ADODBStream.writetext CodeSheet.Cells(i, 1), 1 End Select i = i + 1 DoEvents Loop Until CodeSheet.Cells(i, 1) = "[END]" Dim FileName As String FileName = ThisWorkbook.Path & "\" & ConfigSheet.Cells(1, 2) & ".hta" ADODBStream.savetofile FileName, 2 ADODBStream.Close End Sub
こんな感じの画面です。
テキストには
こういう感じでテキストがたまっていきます。
JScript側でかなり処理をしているので 以前のものよりだいぶすっきりです。
わたしの環境では一応動きました。(゚▽゚*)
アンケートづくり テキスト出力部分も統合
さて,やっとJScript,HTML部分の最後です。たぶん。
けっこう確認はしたんですが・・・どうでしょう。(;´∀`)
Excelとの連携はまだです。
メモ帳などにUTF-8の文字コードで出力し,拡張子HTAで保存すればたぶん動きます。たぶん(;´∀`)
dataフォルダを直下につくり,その中に出力データをtextで出力するはずです。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style type="text/css"> table{border-collapse: collapse;} table,tr,td{border: solid 2px black;} td.clsmondai{padding-left: 5px;font-weight: bold;background-color: black;color: white;width:400px} td.clskaito{padding-left: 20px;background-color: antiquewhite} </style> <script> var ForReading = 1; var ForWriting = 8; var p=[ [1,"クラス","select",["1A","1B","1C"]], [2,"番号","select",renban(1,41)], [3,"食べ物をひとつえらべ","radio",["りんご","みかん","バナナ"]], [5,"てすとですよ","text"] ] var thisName=location.pathname thisName=thisName.slice(thisName.lastIndexOf("\\")+1,thisName.lastIndexOf(".")); var fso = new ActiveXObject("Scripting.FileSystemObject"); if (fso.FolderExists(".\\data")==false) fso.CreateFolder(".\\data"); var DataFile = ".\\data\\"+thisName+"data.txt"; if (fso.FileExists(DataFile)==false){ var data = fso.OpenTextFile(DataFile, ForWriting,true); var tmp="user" for (var i=0;i<p.length;i++){tmp+="◇"+p[i][1]} tmp+="◇Date" data.WriteLine(tmp); data.Close() } var User=new ActiveXObject("WScript.Network").UserName; //ベタ打ちここまで function init(){ resizeTo(500,600); makeForm() } function renban(s,e){ var arr=[] for (var i=s;i<=e;i++) arr.push(i) return arr } function makeForm(){ var tmp=[] tmp.push("<table>") for(var i=0;i<p.length;i++) tmp.push(makeElement(i)) tmp.push("</table>") document.getElementById("table").innerHTML=tmp.join("") } function makeElement(No){ var mondai=p[No][1] var name="No"+(No) var type=p[No][2] var arr=p[No][3] tablepart=document.getElementById("table") var html=[]; var tmp; switch(type){ case "select":tmp = makeSelectElement(name,"select",arr);break case "radio":tmp = makeSelectElement(name,"radio",arr);break case "check":tmp = makeSelectElement(name,"checkbox",arr);break case "text":tmp="<input type='text' name='" + name + "' size='45' />";break case "multi":tmp="<textarea name='" + name +"' rows='5' cols='46' ></textarea>";break } html.push("<tr><td class='clsmondai'>" + (No+1) + " " + mondai + "</td></tr>") html.push("<tr><td class='clskaito'>") html.push(tmp+"</td>") return html.join("") } function makeSelectElement(name,type,arr){ switch(type){ case "select": var tmp=[] tmp.push("<select name='" + name +"'>") for(var i=0;i<arr.length;i++){tmp.push("<option value='" + arr[i]+"'>"+arr[i]+"</option>")} tmp.push("</select>") element=tmp.join("") break case "radio": case "checkbox": //間違いじゃないよ var tmp=[] for(var i=0;i<arr.length;i++){ tmp.push("<input type='"+ type +"' name='" + name + "' value='" + arr[i] +"'>"+arr[i]+"<br>") } element=tmp.join("") break } return element } // データ収集部分 function result(){ var html=[] html.push(User+"◇") for (var i=0;i<p.length;i++){ html.push(getData("No"+i,p[i][2])+"◇") } html.push(Date()) return html.join("") } function PostData(str){ var fso = new ActiveXObject("Scripting.FileSystemObject"); var data = fso.OpenTextFile(DataFile, ForWriting); data.WriteLine(result()); data.Close(); document.forms[0].reset() } function getData(name,type){ switch(type){ case "radio": case "check": return getCheck(name); break; case "text": case "multi": case "select": return document.getElementsByName(name)[0].value.replace(/\r?\n/g,"_"); break; } } function getCheck(name){ var CHECK=document.getElementsByName(name) var tmp="" for(var i=0;i<CHECK.length;i++){ if(CHECK[i].checked) tmp+="_" +CHECK[i].value } return tmp.substring(1) } </script> </head> <body onload="init()"> <form id="formFld"> <div id="table"></div> <input type="button" href="#" value="送信する" onClick="PostData()"/> </form> </body> </html>
だいぶまたいじってます。
var p=[ [1,"クラス","select",["1A","1B","1C"]], [2,"番号","select",renban(1,41)], [3,"食べ物をひとつえらべ","radio",["りんご","みかん","バナナ"]], [5,"てすとですよ","text"] ]
質問のパラメータを二次配列?に固めました。連番も専用の関数を用意。40人とか相手のときはこのほうがいいかな,と。
この部分とタイトルさえExcelから出力すればいいように作った・・はず。
どうかなー
アンケートフォームづくり なんとか。
いろいろと試行錯誤をして,たぶんですが
<table id="~"></table>
に対してinnerHTMLを使うのをHTAでは拒否られていたようでした。
HTMLではそんなこと気にせずやってくれてたので,残念ですが,HTA+JScriptとHTML+JavaScriptで仕様が違うのはわかってること。
ローカルファイルにアクセスしたい私はHTA+JScriptで推し進めるしかないこと。
いろいろな表現方法があるわけで,なんとか乗り越えられることが多々であることから,がんばるしかありません。
とりあえず,拡張子をhtaにしても怒られずに動くものになったのでコードをのせます。
この場合コードって表現でいいのか,ソースって言うべきなのか,そのへん知りませんが気にせずわたしはコードと言い張っておこう。VBA扱うときいいかえるのがめんどい。。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style type="text/css"> table{border-collapse: collapse;} table,tr,td{border: solid 2px black;} td.clsmondai{padding-left: 5px;font-weight: bold;background-color: black;color: white;width:400px} td.clskaito{padding-left: 20px;background-color: antiquewhite} </style> <script> function init(){ var tmp=[] var arr=[];for(var i=1;i<41;i++){arr.push(i)} tmp.push("<table>") tmp.push(makeElement(1,"番号","food","select",arr)) tmp.push(makeElement(2,"食べ物をひとつえらべ","food","radio",["りんご","みかん","バナナ"])) tmp.push(makeElement(3,"好きなペットをえらべ(複数可)","pet","check",["犬","猫","ハムスター"])) tmp.push(makeElement(4,"てすとですよ","textar","text")) tmp.push(makeElement(5,"てすとですとも","text","multi")) tmp.push("</table>") document.getElementById("table").innerHTML=tmp.join("") } function makeElement(No,mondai,name,type,arr){ tablepart=document.getElementById("table") var html=[]; var tmp; switch(type){ case "select":tmp = makeSelectElement(name,"select",arr);break case "radio":tmp = makeSelectElement(name,"radio",arr);break case "check":tmp = makeSelectElement(name,"checkbox",arr);break case "text":tmp="<input type='text' name='" + name + "' size='45' />";break case "multi":tmp="<textarea name='" + name +"' rows='5' cols='46' ></textarea>";break } html.push("<tr><td class='clsmondai'>" + mondai + "</td></tr>") html.push("<tr><td class='clskaito' id='" + name + "'>") html.push(tmp+"</td>") return html.join("") } function makeSelectElement(name,type,arr){ switch(type){ case "select": var tmp=[] tmp.push("<select id='" + name +"'>") for(var i=0;i<arr.length;i++){tmp.push("<option value='" + arr[i]+"'>"+arr[i]+"</option>")} tmp.push("</select>") element=tmp.join("") break case "radio": case "checkbox": //間違いじゃないよ var tmp=[] for(var i=0;i<arr.length;i++){ tmp.push("<input type='"+ type +"' name='" + name + "' value='" + arr[i] +"'>"+arr[i]+"<br>") } element=tmp.join("") break } return element } </script> </head> <body onload="init()"> <form id="formFld"> <div id="table"></div> <input type="button" href="#" value="送信する" onClick="PostData()"/> </form> </body> </html>
余裕がなかったのでペットにバナナがあったりしたのも編集(;´∀`)
こんな画面になるかと思います。
tmp.push(mekeElement(~))
の繰り返しで要素を増やせるように作ったので,Excel側でVBAで制御しやすくなったはず。
あとはきちんと統合していこう。
苦労はしているけどたぶん順調。。
ちょっと小説に逃げよう。
HTA innertHTMLまわりでうまくいかない
あいかわらずアンケートのほうで遊んでいます。
いったんは作れたんですが,JavaScriptの情報をあさってると,便利そうなところにどんどん出会うので,それに従って書き直しているところ。
とりあえずhtmlを作る部分 ブラウザでは動くHTMLをのせます。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style type="text/css"> table{border-collapse: collapse;} table,tr,td{border: solid 2px black;} td.clsmondai{padding-left: 5px;font-weight: bold;background-color: black;color: white;width:400px} td.clskaito{padding-left: 20px;background-color: antiquewhite} </style> <script> function init(){ makeElement(1,"たべものをえらべ","food","select",Array.from(new Array(41)).map((v,i)=> i + 1)) makeElement(2,"ペットをえらべ","pet","radio",["犬","猫","バナナ"]) makeElement(3,"ペットをえらべ","pet2","check",["犬","猫","バナナ"]) makeElement(4,"てすとですよ","textar","text") makeElement(5,"てすとですとも","text","multi") } function makeElement(No,mondai,name,type,arr){ var html=[]; var tmp; switch(type){ case "select":tmp = makeSelectElement(name,"select",arr);break case "radio":tmp = makeSelectElement(name,"radio",arr);break case "check":tmp = makeSelectElement(name,"checkbox",arr);break case "text":tmp="<input type='text' name='" + name + "' size='45' />";break case "multi":tmp="<textarea name='" + name +"' rows='5' cols='46' ></textarea>";break } html.push(document.getElementById("table0").innerHTML) html.push("<tr><td class='clsmondai'>" + mondai + "</td></tr>") html.push("<tr><td class='clskaito' id='" + name + "'></td>") document.getElementById("table0").innerHTML=html.join("") if (type=="select") { document.getElementById(name).appendChild(tmp) } else { document.getElementById(name).innerHTML=tmp } } function makeSelectElement(name,type,arr){ switch(type){ case "select": var element = document.createElement("select") for(var i=0;i<arr.length;i++){ var option=document.createElement("option") option.value=arr[i] option.innerText=arr[i] element.appendChild(option) } break case "radio": case "checkbox": //間違いじゃないよ var tmp=[] for(var i=0;i<arr.length;i++){ tmp.push("<input type='"+ type +"' name='" + name + "' value='" + arr[i] +"'>"+arr[i]+"<br>") } element=tmp.join("") break } return element } </script> </head> <body onload="init()"> <form id="formFld"> <table id="table0"> </table> <input type="button" href="#" value="送信する" onClick="PostData()"/> </form> </body> </html>
画面はこんな感じになる
アンケート部分を作るところをかなりシンプルにできたつもりです。やってておもしろかった。
ただ,これをHTAにすると,innerHTMLを扱う周辺でエラーが出てうまく動かない。
未知の実行時エラーとでる。ほんと意味がワカラナイ 未知って
でもがんばる
いろいろ試しているうちに,うまくいった段階を破壊することがあるので,とりあえず記録を残しにきました(;´∀`)
アンケート けっこうできてきた。
一度はまりだすと,小説より面白いですね。ひたすらアンケートのやつやってました。
Excelのブックをアップする手段がないので,物自身は上げれませんが,
概要とコードを上げてみます。
図のように,エクセルのシートに設問のデータを入れると,htaを作り出すという仕組みです。原因不明の上部の空白がいまのとこまだ解決できていませんが,使えそうなレベルになってきています。
Excelのコードを載せます。
・ポイントがあるとするならば,ADODB.Streamを使うことでUTF-8で書き出している点
・cssやJavaScript部分は共通なのでそのあたりをヘッダやフッタとしてExcelシートにのせておいて,それをどんどん張り付けてる点
・それらの一部を変更したい場合はreplaceで対応しています。
あんまり特別なことはしていないですね。けっこう簡単にやりたいことができました。。
はてなブログ,簡単なファイルアップロード機能あったら,さらに便利なのになぁ( ´Д`)=3
Sub MakeText() Dim FileName As String FileName = ThisWorkbook.Path & "\" & "test.hta" Dim ADODBStream As Object Set ADODBStream = CreateObject("ADODB.Stream") With ADODBStream .Charset = "UTF-8" .Open End With Dim HeaderSheet As Worksheet: Set HeaderSheet = ThisWorkbook.Worksheets("ヘッダ") Dim FooterSheet As Worksheet: Set FooterSheet = ThisWorkbook.Worksheets("フッタ") Dim ConfigSheet As Worksheet: Set ConfigSheet = ThisWorkbook.Worksheets("アンケートシート") Dim 問題名配列文字列 As String, 問題タイプ配列文字列 As String Dim i, j, tmp, tmp2 tmp = "[""No" & ConfigSheet.Cells(4, 1) & """" tmp2 = "[""" & ConfigSheet.Cells(4, 3) & """" i = 5 Do While ConfigSheet.Cells(i, 1) <> "" tmp = tmp & ",""No" & ConfigSheet.Cells(i, 1) & """" tmp2 = tmp2 & ",""" & ConfigSheet.Cells(i, 3) & """" i = i + 1 Loop 問題名配列文字列 = tmp & "]" 問題タイプ配列文字列 = tmp2 & "]" i = 1 Do tmp = HeaderSheet.Cells(i, 1) If InStr(tmp, "【タイトル】") > 0 Then tmp = Replace(tmp, "【タイトル】", ConfigSheet.Cells(1, 2)) If InStr(tmp, "【問題名配列】") > 0 Then tmp = Replace(tmp, "【問題名配列】", 問題名配列文字列) If InStr(tmp, "【問題タイプ配列】") > 0 Then tmp = Replace(tmp, "【問題タイプ配列】", 問題タイプ配列文字列) ADODBStream.writetext tmp, 1 i = i + 1 DoEvents Loop Until HeaderSheet.Cells(i, 1) = "--End--" '各要素 i = 4 Do While ConfigSheet.Cells(i, 1) <> "" ADODBStream.writetext " <tr>", 1 ADODBStream.writetext " <td class=""setsumon"">" & ConfigSheet.Cells(i, 2) & "</td>", 1 ADODBStream.writetext " </tr>", 1 ADODBStream.writetext " <tr>", 1 ADODBStream.writetext " <td class=""kaitou"">", 1 Select Case ConfigSheet.Cells(i, 3) Case Is = "radio" j = 6 Do While ConfigSheet.Cells(i, j) <> "" tmp = ConfigSheet.Cells(i, j) ADODBStream.writetext " <input type=""radio"" name=""No" & ConfigSheet.Cells(i, 1) & """ value=""" & tmp & """>" & tmp & "<br>", 1 j = j + 1 Loop Case Is = "check" j = 6 Do While ConfigSheet.Cells(i, j) <> "" tmp = ConfigSheet.Cells(i, j) ADODBStream.writetext " <input type=""checkbox"" name=""No" & ConfigSheet.Cells(i, 1) & """ value=""" & tmp & """>" & tmp & "<br>", 1 j = j + 1 Loop Case Is = "text" ADODBStream.writetext " <input type=""text"" name=""No" & ConfigSheet.Cells(i, 1) & """ size=""45"" />", 1 Case Is = "multi" ADODBStream.writetext " <textarea name=""No" & ConfigSheet.Cells(i, 1) & """ rows=""5"" cols=""46"" ></textarea>", 1 End Select ADODBStream.writetext " </td>", 1 ADODBStream.writetext " </tr>", 1 ADODBStream.writetext "", 1 i = i + 1 Loop i = 1 Do ADODBStream.writetext FooterSheet.Cells(i, 1), 1 i = i + 1 DoEvents Loop Until FooterSheet.Cells(i, 1) = "--End--" ADODBStream.savetofile FileName, 2 ADODBStream.Close End Sub
excelファイルはアップできなくても,生成したコードぐらいは上げれるので,生成したコードを上げます。中身は推察されるはず
<!doctype html> <html> <head> <meta charset="utf-8"> <title>テストアンケート</title> <style type="text/css"> table{border-collapse: collapse;} table,tr,td{border: solid 2px black;} td.bango{text-align: center;background-color: black;font-weight: bold;color: white;width:15px} td.setsumon{padding-left: 5px;font-weight: bold;background-color: black;color: white;width:400px} td.kaitou{padding-left: 20px;background-color: antiquewhite} </style> <script> function result(){ var mondaiName=["No1","No2","No3","No4"] var mondaiType=["radio","check","text","multi"] var html=[] for (var i=0;i<mondaiName.length;i++){ html.push(i+1 + "_" + getData(mondaiName[i],mondaiType[i])+"◇") } document.getElementById("answer").innerHTML=html.join("") } function getData(name,type){ switch(type){ case "radio": case "check": return getCheck(name); break; case "text": case "multi": return document.getElementsByName(name)[0].value.replace(/\r?\n/g,"■"); break; } } function getCheck(name){ var CHECK=document.getElementsByName(name) var tmp="" for(var i=0;i<CHECK.length;i++){ if(CHECK[i].checked) tmp+="," +CHECK[i].value } return tmp.substring(1) } </script> </head> <body> <form name="form1"> <table> <tr> <td class="setsumon">この中で一番好きな食べ物はどれか。</td> </tr> <tr> <td class="kaitou"> <input type="radio" name="No1" value="カレー">カレー<br> <input type="radio" name="No1" value="ラーメン">ラーメン<br> <input type="radio" name="No1" value="うどん">うどん<br> <input type="radio" name="No1" value="そば">そば<br> </td> </tr> <tr> <td class="setsumon">好きなペットは何か。(複数えらんでいい)</td> </tr> <tr> <td class="kaitou"> <input type="checkbox" name="No2" value="犬">犬<br> <input type="checkbox" name="No2" value="ネコ">ネコ<br> <input type="checkbox" name="No2" value="ハムスター">ハムスター<br> </td> </tr> <tr> <td class="setsumon">自分を動物に例えると。</td> </tr> <tr> <td class="kaitou"> <input type="text" name="No3" size="45" /> </td> </tr> <tr> <td class="setsumon">この変なアンケートについて感想をどうぞ。</td> </tr> <tr> <td class="kaitou"> <textarea name="No4" rows="5" cols="46" ></textarea> </td> </tr> </table> <input type="button" href="#" value="送信する" onClick="result()"/> </form> <p>回答</p> <div id="answer"></div> </body> </html>
アンケート部分の例を作ってみました。
どういうコードを吐き出させればいいのかを確かめるため,とりあえずアンケートフォームを作ってみました。
画面はこんな感じ
送信ボタンを押すと,
<div id="answer"></div>
にアンケートの結果をとりあえず出すように作りました。
最終的にはこれを望む場所に放り込むよう作ればいい。
フォーム内部もできるだけシンプルになるように作ってみた。できるだけタグをそぎ落として,必要最小限にし,構造ができるだけ似通うようにして,
マクロでコードを吐く部分が楽になるようにしてみた。
コードを載せます。JavaScriptもすこーしは慣れてきたかな。。
今回のものはhtmlのままでもちゃんといけますし,htaにしても動きます。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style type="text/css"> table{border-collapse: collapse;} table,tr,td{border: solid 2px black;} td.bango{text-align: center;background-color: black;font-weight: bold;color: white;width:15px} td.setsumon{padding-left: 5px;font-weight: bold;background-color: black;color: white;width:400px} td.kaitou{padding-left: 20px;background-color: antiquewhite} </style> <script> function result(){ var mondaiName=["toi1","toi2","toi3","toi4"] var mondaiType=["radio","check","text","multi"] var html=[] for (var i=0;i<mondaiName.length;i++){ html.push(i+1 + "_" + getData(mondaiName[i],mondaiType[i])+"◇") } document.getElementById("answer").innerHTML=html.join("") } function getData(name,type){ switch(type){ case "radio": case "check": return getCheck(name); break; case "text": case "multi": return document.getElementsByName(name)[0].value.replace(/\r?\n/g,"■"); break; } } function getCheck(name){ var CHECK=document.getElementsByName(name) var tmp="" for(var i=0;i<CHECK.length;i++){ if(CHECK[i].checked) tmp+="," +CHECK[i].value } return tmp.substring(1) } </script> </head> <body> <form name="form1"> <table> <tr> <td class="setsumon">1 授業は全体的にわかりやすいですか。</td> </tr> <tr> <td class="kaitou"> <input type="radio" name="toi1" value="1">とても分かりやすかった<br> <input type="radio" name="toi1" value="2">分かりやすかった<br> <input type="radio" name="toi1" value="2">あまり分からない<br> </td> </tr> <tr> <td class="setsumon">2 好きな科目をいくつか選びなさい</td> </tr> <tr> <td class="kaitou"> <input type="checkbox" name="toi2" value="国">国語<br> <input type="checkbox" name="toi2" value="英">英語<br> <input type="checkbox" name="toi2" value="数">数学<br> <input type="checkbox" name="toi2" value="理">理科<br> <input type="checkbox" name="toi2" value="社">社会<br> </td> </tr> <tr> <ul><td class="setsumon">3 一言メッセージ</td></ul> </tr> <tr> <td class="kaitou"> <input type="text" name="toi3" size="45" /> </td> </tr> <tr> <td class="setsumon">4 ご意見ご要望</td> </tr> <tr> <td class="kaitou"> <textarea name="toi4" rows="5" cols="46" ></textarea> </td> </tr> </table> <input type="button" href="#" value="送信する" onClick="result()"/> </form> <p>回答</p> <div id="answer"></div> </body> </html>
Excel側でテキストコードを吐き出すのも楽にできそうだったので,けっこう進んだ気がします。