HTML Generator 2nd

以前、ブラウザ上で動作するJavaScriptによる簡易HTMLソースコード生成装置「HTML Generator」を作ったが、
その後、HTML5+JavaScriptやPHP+MySQL等を学び、それとは別に、新たに「HTML Generator 2nd」を作ることにした。
「HTML Generator 2nd」も、コードを書くコードなので、狭義のメタプログラムの一種であるといえるのだが、
どちらかといえば、「自動プログラミング」と言った方がより正確かも知れない。



零. HTML5文書の生成

<!DOCTYPE>タグ: 使用する(<!DOCTYPE html>)
lang属性: 使用する(<html lang="ja">)
ロボット系サーチエンジン対策: <meta name="robots"  content="noindex,nofollow">
文字コード:
Webページのタイトル:
ヘッダ内部スタイルシート(CSS): 使用する
外部スタイルシート(CSS): 使用する
ファイル名:(拡張子.cssを除く)
ヘッダ内部JavaScript: 使用する
外部JavaScript: 使用する
ファイル名:(拡張子.jsを除く)
jQuery: 使用する
背景色: 指定する
標準の文字色: 指定する
未読リンクの色: 指定する
既読リンクの色: 指定する
クリック時のリンクの色: 指定する

(解説) 文字コード、Webページのタイトル、背景色、標準の文字色、
未読リンクの色、既読リンクの色、クリック時のリンクの色を入力後、
「生成する」ボタンを押すと、HTML文書が生成される。
但し、背景色、標準の文字色、未読リンクの色、既読リンクの色、
クリック時のリンクの色を指定する際は、チェックボックスにチェックを入れ、
「色の名前」、または「#に続けて16進数のカラーコード」を入力すること。
また、スタイルシート(CSS)やJavaScript、jQuery等を使用する際も、
チェックボックスにチェックを入れた方が楽。




壱. ソースコードの生成

HTMLネームエンティティへの変換:

インデントの挿入/ソースコードの生成:


(解説) テキストエリアにコピーペーストした文字列に対して、
「HTMLネームエンティティへの変換」の各ボタンを押すと、
HTMLの特殊文字がネームエンティティへの変換(サニタイジング)される。
また、「インデントの挿入/ソースコードの生成」の各ボタンを押すと、
JavaScriptのdocument.writeやdocument.writeln、PHPのprintやechoによる出力文にしたり、
行頭のインデントを整形(半角スペースは、個数回分、ボタンを連打する)したり、
行末に改行タグ・改行コードを埋め込んだりすることができる。




弐. 表の生成・改

見出しタグ<th>: 使用しない 最初の行 最初の列 両方
表自身のページ内の位置: 中央揃え(センタリング)する
<th>タグのスタイル: 左揃え 中央揃え(センタリング) 右揃え
<td>タグのスタイル: 左揃え 中央揃え(センタリング) 右揃え
frame: void
rules: none
枠線の幅:
行数:
列数:

(解説) 以前に作った、HTML Generator「表の生成」機能の改良版。
前作と同様、枠線の幅、行数、列数を入力後、「プレビュー」ボタンを押すと、
表が生成され、その仕上がり具合が確認できる。
ここで、frame属性をvoidにすると、外枠を、
rules属性をnoneにすると、枠内の罫線を、
それぞれ消すことが出来る。
また、「ソースコードを生成する」ボタンを押すと、
その表のソースコードが生成される。

さらに、今作では、表のセルの見出しタグ<th>の使用に関するモードや、
表自身のページ内の位置を中央揃え(センタリング)するかどうか、
<th>タグのスタイル、<td>タグのスタイルに関しても、
スタイルシート(CSS)を用いて、より具体的に指定できるようになった。




参. 択一式問題の生成

選択肢数:
問題数:

(解説) 選択肢数と問題数を入力し、「生成する」ボタンを押すと、
選択肢数×問題数分の択一式問題が生成される。採点機能とヒント機能付きであるが、
これらは、jQueryのtextメソッドを使用している為、HTMLのヘッダ部分に、
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
というjQueryの使用宣言をする必要がある。ヒント機能は、クリックする度に、
【解説】の表示/非表示を切り替えることができるようにした。







ソースコード

零. HTML5文書の生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<table border="5" frame="void" rules="none">
<tr>
<td style="text-align:right;">&lt;!DOCTYPE&gt;タグ:</td>
<td style="text-align:left;"><input type="checkbox" id="usedt" checked>使用する(&lt;!DOCTYPE&nbsp;html&gt;)</td>
</tr>
<tr>
<td style="text-align:right;">lang属性:</td>
<td style="text-align:left;"><input type="checkbox" id="uselang" checked><!-- lang属性は指定をデフォルトに -->
使用する(&lt;html&nbsp;lang=&quot;ja&quot;&gt;)</td>
</tr>
<tr>
<td style="text-align:right;">ロボット系サーチエンジン対策:</td>
<td style="text-align:left;"><input type="checkbox" id="userbt">
&lt;meta&nbsp;name=&quot;robots&quot; 
&nbsp;content=&quot;noindex,nofollow&quot;&gt;</td>
</tr>
<tr>
<td style="text-align:right;">文字コード:</td>
<td style="text-align:left;"><input type="text" id="charset" value="utf-8"></td><!-- 文字コードはutf-8をデフォルトに -->
</tr>
<tr>
<td style="text-align:right;">Webページのタイトル:</td>
<td style="text-align:left;"><input type="text" id="title"></td>
</tr>
<tr>
<td style="text-align:right;">ヘッダ内部スタイルシート(CSS):</td>
<td style="text-align:left;"><input type="checkbox" id="usecssin">使用する</td>
</tr>
<tr>
<td style="text-align:right;">外部スタイルシート(CSS):</td>
<td style="text-align:left;"><input type="checkbox" id="usecssout">使用する<br>
ファイル名:<input type="text" id="css">(拡張子.cssを除く)</td>
</tr>
<tr>
<td style="text-align:right;">ヘッダ内部JavaScript:</td>
<td style="text-align:left;"><input type="checkbox" id="usejsin">使用する</td>
</tr>
<tr>
<td style="text-align:right;">外部JavaScript:</td>
<td style="text-align:left;"><input type="checkbox" id="usejsout">使用する<br>
ファイル名:<input type="text" id="js">(拡張子.jsを除く)</td>
</tr>
<tr>
<td align="right">jQuery:</td><!-- 新機能はjQueryを参照可能 -->
<td align="left"><input type="checkbox" id="usejquery">使用する</td>
</tr>
<tr>
<td style="text-align:right;">背景色:</td>
<td style="text-align:left;"><input type="checkbox" id="usebgc">指定する
<input type="text" id="bgc"></td>
</tr>
<tr>
<td style="text-align:right;">標準の文字色:</td>
<td style="text-align:left;"><input type="checkbox" id="usetc">指定する
<input type="text" id="tc"></td>
</tr>
<tr>
<td style="text-align:right;">未読リンクの色:</td>
<td style="text-align:left;"><input type="checkbox" id="uselc">指定する
<input type="text" id="lc"></td>
</tr>
<tr>
<td style="text-align:right;">既読リンクの色:</td>
<td style="text-align:left;"><input type="checkbox" id="usevc">指定する
<input type="text" id="vc"></td>
</tr>
<tr>
<td style="text-align:right;">クリック時のリンクの色:</td>
<td style="text-align:left;"><input type="checkbox" id="useac">指定する
<input type="text" id="ac"></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2"><hr></td>
</tr>
<tr>
<td style="text-align:center" colspan="2">
<input type="button" value="生成する" onclick="HTML5Generator()"></td>
</tr>
</table>
</form>

JavaScriptサイド

var HTML5Generator = function(){
  var flagdt = document.getElementById("usedt").checked; // <!DOCTYPE>タグ使用フラグ(デフォルトはON)
  var flaglang = document.getElementById("uselang").checked; // lang属性使用フラグ(デフォルトはON?)
  var flagrbt = document.getElementById("userbt").checked; // ロボット系サーチエンジン対策使用フラグ

  var flagcssin = document.getElementById("usecssin").checked; // ヘッダ内部スタイルシート(CSS)使用フラグ
  var flagcssout = document.getElementById("usecssout").checked; // 外部スタイルシート(CSS)使用フラグ
  var flagjsin = document.getElementById("usejsin").checked; // ヘッダ内部JavaScript使用フラグ
  var flagjsout = document.getElementById("usejsout").checked; // 外部JavaScript使用フラグ
  var flagjquery = document.getElementById("usejquery").checked; // jQuery使用フラグ

  var flagbgc = document.getElementById("usebgc").checked; // 背景色指定フラグ
  var flagtc = document.getElementById("usetc").checked; // 標準の文字色指定フラグ
  var flaglc = document.getElementById("uselc").checked; // 未読リンクの色指定フラグ
  var flagvc = document.getElementById("usevc").checked; // 既読リンクの色指定フラグ
  var flagac = document.getElementById("useac").checked; // クリック時のリンクの色指定フラグ

  var charset = document.getElementById("charset").value; // 文字コードの値を取得
  var title = document.getElementById("title").value; // Webページのタイトルを取得
  var css = document.getElementById("css").value; // 外部スタイルシート(CSS)のファイル名を取得
  var js = document.getElementById("js").value; // 外部JavaScriptのファイル名を取得
  var bgc = document.getElementById("bgc").value; // 背景色の値を取得
  var tc = document.getElementById("tc").value; // 標準の文字色の値を取得
  var lc = document.getElementById("lc").value; // 未読リンクの色の値を取得
  var vc = document.getElementById("vc").value; // 既読リンクの色の値を取得
  var ac = document.getElementById("ac").value; // クリック時のリンクの色の値を取得

  document.writeln("<html>");
  document.writeln("<head>");
  document.writeln("<title>HTML5文書の生成</title>");
  document.writeln("</head>");
  document.writeln("<body bgcolor=\"#000000\" text=\"#ffa500\">");
  document.writeln("<h1>HTML5文書の生成</h1>");

  document.writeln("<pre>");

  if (flagdt) {
    document.writeln("&lt;!DOCTYPE&nbsp;html&gt;");
  } // <!DOCTYPE>タグ使用フラグがONなら出力
  if (flaglang) {
    document.writeln("&lt;html&nbsp;lang=&quot;ja&quot;&gt;");
  } else {
    document.writeln("&lt;html&gt;");
  } // lang属性使用フラグがONなら<html lang="ja">、OFFなら<html>タグのみ

  document.writeln("&lt;head&gt;");

  if (flagrbt) {
    document.write("&lt;meta&nbsp;name=&quot;robots&quot;");
    document.writeln("&nbsp;content=&quot;noindex,nofollow&quot;&gt;");
  } // ロボット系サーチエンジン対策使用フラグがONなら出力

  document.writeln("&lt;meta&nbsp;charset=&quot;" + charset + "&quot;&nbsp;/&gt;");
  // <meta charset="文字コード" />を出力する。デフォルトはutf-8。

  if (flagcssin || flagcssout) {
    document.write("&lt;meta&nbsp;http-equiv=&quot;content-style-type&quot;");
    document.writeln("&nbsp;content=&quot;text/css&quot;&gt;");
  } // <meta http-equiv="Content-Style-Type" content="text/css">を出力する。

  document.writeln("&lt;title&gt;" + title + "&lt;/title&gt;"); // <title>タイトル</title>を出力する。

  if (flagcssout) {
    document.write("&lt;link&nbsp;rel=&quot;stylesheet&quot;");
    document.write("&nbsp;type=&quot;text/css&quot;");
    document.writeln("&nbsp;href=&quot;" + css + ".css&quot;&gt;");
  } // <link rel="stylesheet" type="text/css" href="ファイル名.css">を出力する。

  if (flagjsout) {
    document.write("&lt;script");
    document.write("&nbsp;language=&quot;JavaScript&quot;");
    document.write("&nbsp;type=&quot;text/javascript&quot;");
    document.write("&nbsp;src=&quot;" + js + ".js&quot;&gt;");
    document.writeln("&lt;/script&gt;");
  } // <script language="JavaScript" type="text/javascript" src="ファイル名.js"></script>を出力する。

  if (flagjquery) {
    document.write("&lt;script");
    document.write("&nbsp;language=&quot;JavaScript&quot;");
    document.write("&nbsp;type=&quot;text/javascript&quot;");
    document.write("&nbsp;src=&quot;jquery.js&quot;&gt;");
    document.writeln("&lt;/script&gt;");
  } // jQuery使用フラグがONなら出力

  if (flagcssin) {
    document.writeln("&lt;style&nbsp;type=&quot;text/css&quot;&gt;");
    document.writeln("&lt;!--\n");
    document.writeln("--&gt;");
    document.writeln("&lt;/style&gt;");
  } // ヘッダ内部スタイルシート(CSS)使用フラグがONなら出力

  if (flagjsin) {
    document.write("&lt;script");
    document.write("&nbsp;language=&quot;JavaScript&quot;");
    document.writeln("&nbsp;type=&quot;text/javascript&quot;&gt;");
    document.writeln("&lt;!--\n");
    document.writeln("//--&gt;");
    document.writeln("&lt;/script&gt;");
  } // ヘッダ内部JavaScript使用フラグがONなら出力

  document.writeln("&lt;/head&gt;");

  document.write("&lt;body");
  if (flagbgc) {
    document.write("&nbsp;bgcolor=&quot;" + bgc + "&quot;");
  } // 背景色
  if (flagtc) {
    document.write("&nbsp;text=&quot;" + tc + "&quot;");
  } // 標準の文字色
  if (flaglc) {
    document.write("&nbsp;link=&quot;" + lc + "&quot;");
  } // 未読リンクの色
  if (flagvc) {
    document.write("&nbsp;vlink=&quot;" + vc + "&quot;");
  } // 既読リンクの色
  if (flagac) {
    document.write("&nbsp;alink=&quot;" + ac + "&quot;");
  } // クリック時のリンクの色
  document.writeln("&gt;");

  document.writeln("&lt;div&nbsp;style=&quot;text-align:center;&quot;&gt;");
  document.writeln("&lt;h1&gt;" + title + "&lt;/h1&gt;");
  document.writeln("&lt;/div&gt;");

  document.writeln("&lt;/body&gt;");
  document.write("&lt;/html&gt;");

  document.writeln("</pre>");

  document.writeln("</body>");
  document.write("</html>");
}



壱. ソースコードの生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<textarea id="article" cols="80" rows="20"></textarea>
<p>
HTMLネームエンティティへの変換:<br>
<input type="button" value="「&lt;」を「&amp;lt;」に変換" onclick="sanitizinglt()">
<input type="button" value="「&gt;」を「&amp;gt;」に変換" onclick="sanitizinggt()">
<input type="button" value="「&quot;」を「&amp;quot;」に変換" onclick="sanitizingquot()"><br>
<input type="button" value="「&amp;」を「&amp;amp;」に変換" onclick="sanitizingamp()">
<input type="button" value="半角スペースを「&amp;nbsp;」に変換" onclick="sanitizingnbsp()">
</p>
<p>
インデントの挿入/ソースコードの生成:<br>
<input type="button" value="JavaScript(document.write)" onclick="jsdocwrite()">
<input type="button" value="JavaScript(document.writeln)" onclick="jsdocwriteln()">
<input type="button" value="PHP(print)" onclick="phpprint()">
<input type="button" value="PHP(echo)" onclick="phpecho()"><br>
<input type="button" value="行頭に半角スペース1個を付加" onclick="addnbsp()">
<input type="button" value="行頭にTabを付加" onclick="addtab()">
<input type="button" value="全行コメントアウト(行頭に「// 」を付加)" onclick="commentout()"><br>
<input type="button" value="行末に&lt;br&gt;タグを付加" onclick="addbr()">
<input type="button" value="行末に&lt;br /&gt;タグを付加" onclick="addbr2()">
<input type="button" value="行末に改行コード&#92;n(LF)を付加" onclick="addlf()">
</form>

JavaScriptサイド

var input, output; // テキストエリアへ入出力する為の変数
var record; // 行ごとに文字列を代入する配列
var i, n; // ループ変数と行数を格納する為の変数

var sanitizinglt = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  output = input.replace(RegExp("<","g"), "&lt;"); // 「<」を「&lt;」へ変換
  document.getElementById("article").value = output; // テキストエリアへ出力する
}

var sanitizinggt = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  output = input.replace(RegExp(">","g"), "&gt;"); // 「>」を「&gt;」へ変換
  document.getElementById("article").value = output; // テキストエリアへ出力する
}

var sanitizingquot = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  output = input.replace(RegExp("\"","g"), "&quot;"); // 「"」を「&quot;」へ変換
  document.getElementById("article").value = output; // テキストエリアへ出力する
}

var sanitizingamp = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  output = input.replace(RegExp("&","g"), "&amp;"); // 「&」を「&amp;」へ変換
  document.getElementById("article").value = output; // テキストエリアへ出力する
}

var sanitizingnbsp = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  output = input.replace(RegExp(" ","g"), "&nbsp;"); // 「半角スペース」を「&nbsp;」へ変換
  document.getElementById("article").value = output; // テキストエリアへ出力する
}

var jsdocwrite = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  record = input.split("\n");
  n = record.length; // 行数を算出する
  output = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = "document.write(\"" + record[i] + "\");";
    if(i == (n - 1)){
      output += record[i];
    } else {
      output += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("article").value = output; // テキストエリアへ出力する
} // JavaScriptのdocument.writeとして生成する

var jsdocwriteln = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  record = input.split("\n");
  n = record.length; // 行数を算出する
  output = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = "document.writeln(\"" + record[i] + "\");";
    if(i == (n - 1)){
      output += record[i];
    } else {
      output += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("article").value = output; // テキストエリアへ出力する
} // JavaScriptのdocument.writelnとして生成する

var phpprint = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  record = input.split("\n");
  n = record.length; // 行数を算出する
  output = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = "print '" + record[i] + "';";
    if(i == (n - 1)){
      output += record[i];
    } else {
      output += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("article").value = output; // テキストエリアへ出力する
} // PHPのprintとして生成する

var phpecho = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  record = input.split("\n");
  n = record.length; // 行数を算出する
  output = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = "echo '" + record[i] + "';";
    if(i == (n - 1)){
      output += record[i];
    } else {
      output += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("article").value = output; // テキストエリアへ出力する
} // PHPのechoとして生成する

var addnbsp = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  record = input.split("\n");
  n = record.length; // 行数を算出する
  output = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = " " + record[i]; // 行頭に半角スペース1個を付加
    if(i == (n - 1)){
      output += record[i];
    } else {
      output += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("article").value = output; // テキストエリアへ出力する
} // 行頭に半角スペース1個を付加

var addtab = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  record = input.split("\n");
  n = record.length; // 行数を算出する
  output = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = "\t" + record[i]; // 行頭にTabを付加
    if(i == (n - 1)){
      output += record[i];
    } else {
      output += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("article").value = output; // テキストエリアへ出力する
} // 行頭にTabを付加

var commentout = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  record = input.split("\n");
  n = record.length; // 行数を算出する
  output = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = "// " + record[i]; // 行頭に「// 」を付加
    if(i == (n - 1)){
      output += record[i];
    } else {
      output += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("article").value = output; // テキストエリアへ出力する
} // 全行コメントアウト

var addbr = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  record = input.split("\n");
  n = record.length; // 行数を算出する
  output = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = record[i] + "<br>"; // 行末に<br>タグを付加
    if(i == (n - 1)){
      output += record[i];
    } else {
      output += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("article").value = output; // テキストエリアへ出力する
} // 行末に<br>タグを付加

var addbr2 = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  record = input.split("\n");
  n = record.length; // 行数を算出する
  output = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = record[i] + "<br />"; // 行末に<br />タグを付加
    if(i == (n - 1)){
      output += record[i];
    } else {
      output += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("article").value = output; // テキストエリアへ出力する
} // 行末に<br />タグを付加

var addlf = function(){
  input = document.getElementById("article").value; // テキストエリアから読み込む
  record = input.split("\n");
  n = record.length; // 行数を算出する
  output = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = record[i] + "\\n"; // 行末に改行コード\n(LF)を付加
    if(i == (n - 1)){
      output += record[i];
    } else {
      output += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("article").value = output; // テキストエリアへ出力する
} // 行末に改行コード\n(LF)を付加



弐. 表の生成・改

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<table border="5" frame="void" rules="none">
<tr>
<td style="text-align:right;">見出しタグ&lt;th&gt;:</td>
<td style="text-align:left;">
<input type="radio" name="headers" id="none" checked>使用しない<!-- 全て&lt;td&gt;タグ -->
<input type="radio" name="headers" id="firstrow">最初の行<!-- 最上段だけ&lt;th&gt;タグ -->
<input type="radio" name="headers" id="firstcolumn">最初の列<!-- 最左列だけ&lt;th&gt;タグ -->
<input type="radio" name="headers" id="both">両方<!-- 最初の行と最初の列に&lt;th&gt;タグを使用 -->
</td>
</tr>
<tr>
<td style="text-align:right;">表自身のページ内の位置:</td>
<td style="text-align:left;"><input type="checkbox" id="marginauto">中央揃え(センタリング)する</td>
</tr>
<tr>
<td style="text-align:right;">&lt;th&gt;タグのスタイル:</td>
<td style="text-align:left;">
<input type="radio" name="thstyle" id="thleft">左揃え
<input type="radio" name="thstyle" id="thcenter" checked>中央揃え(センタリング)<!-- デフォルト -->
<input type="radio" name="thstyle" id="thright">右揃え
</td>
</tr>
<tr>
<td style="text-align:right;">&lt;td&gt;タグのスタイル:</td>
<td style="text-align:left;">
<input type="radio" name="tdstyle" id="tdleft">左揃え
<input type="radio" name="tdstyle" id="tdcenter" checked>中央揃え(センタリング)<!-- デフォルト -->
<input type="radio" name="tdstyle" id="tdright">右揃え
</td>
</tr>
<tr>
<td style="text-align:right;">frame:</td>
<td style="text-align:left;"><input type="checkbox" id="framevoid">void</td>
</tr>
<tr>
<td style="text-align:right;">rules:</td>
<td style="text-align:left;"><input type="checkbox" id="rulesnone">none</td>
</tr>
<tr>
<td style="text-align:right;">枠線の幅:</td>
<td style="text-align:left;"><input type="text" id="border" value="5"></td>
</tr>
<tr>
<td style="text-align:right;">行数:</td>
<td style="text-align:left;"><input type="text" id="rows" value="2"></td>
</tr>
<tr>
<td style="text-align:right;">列数:</td>
<td style="text-align:left;"><input type="text" id="cols" value="2"></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2"><hr></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2">
<input type="button" value="プレビュー" onclick="preview()">
<input type="button" value="ソースコードを生成する" onclick="HTMLtableGenerator2nd()"><!--//-->
</td>
</tr>
</table>
</form>

JavaScriptサイド(プレビュー)

var preview = function(){
  var thmode; // 見出しタグ<th>の使用に関するモード
  var flagma = document.getElementById("marginauto").checked;
  // 表自身のページ内の位置を中央揃え(センタリング)するフラグ
  var thstyle; // <th>タグのスタイル
  var tdstyle; // <td>タグのスタイル

  var flagfv = document.getElementById("framevoid").checked; // frame属性の値をvoidにするフラグ
  var flagrn = document.getElementById("rulesnone").checked; // rules属性の値をnoneにするフラグ

  var b = parseInt(document.getElementById("border").value); // 枠線の幅を取得
  var r = parseInt(document.getElementById("rows").value); // 行数を取得
  var c = parseInt(document.getElementById("cols").value); // 列数を取得

  // 見出しタグ<th>の使用に関するモード
  if(document.getElementById("none").checked == true){ thmode=0; } // 使用しない
  if(document.getElementById("firstrow").checked == true){ thmode=1; } // 最初の行
  if(document.getElementById("firstcolumn").checked == true){ thmode=2; } // 最初の列
  if(document.getElementById("both").checked == true){ thmode=3; } // 両方

  // <th>タグのスタイル
  if(document.getElementById("thleft").checked == true){ thstyle=0; } // 左揃え
  if(document.getElementById("thcenter").checked == true){ thstyle=1; } // 中央揃え(センタリング)
  if(document.getElementById("thright").checked == true){ thstyle=2; } // 右揃え

  // <td>タグのスタイル
  if(document.getElementById("tdleft").checked == true){ tdstyle=0; } // 左揃え
  if(document.getElementById("tdcenter").checked == true){ tdstyle=1; } // 中央揃え(センタリング)
  if(document.getElementById("tdright").checked == true){ tdstyle=2; } // 右揃え

  document.writeln("<html>");
  document.writeln("<head>");
  document.writeln("<title>表の生成結果(" + r + "行" + c + "列" + ")</title>");
  document.writeln("</head>");
  document.writeln("<body>");
  document.writeln("<div style=\"text-align:center;\">");
  document.writeln("<h1>表の生成結果(" + r + "行" + c + "列" + ")</h1>");

  document.write("<table border=\"" + b + "\"");
  if (flagfv) {
    document.write(" frame=\"void\"");
  }
  if (flagrn) {
    document.write(" rules=\"none\"");
  }
  if (flagma) {
    document.write(" style=\"margin-left:auto;margin-right:auto;text-align:center;\"");
  }
  document.writeln(">");

  if(thmode == 0){ // <th>タグを使用しない

    for(i=0;i<r;++i){
      document.writeln("<tr>");
      for(j=0;j<c;++j){
        switch (tdstyle) {
          case 0:
            document.writeln("<td style=\"text-align:left;\">―</td>");
            break;
          case 1:
            document.writeln("<td style=\"text-align:center;\">―</td>");
            break;
          case 2:
            document.writeln("<td style=\"text-align:right;\">―</td>");
            break;
          default:
            break;
        } // switch-case文終了
      } // 内側のforループ終了
      document.writeln("</tr>");
    } // 外側のforループ終了

  } else if(thmode == 1){ // 最初の行のみ<th>

    document.writeln("<tr>"); // 最初の行開始
      for(j=0;j<c;++j){
        switch (thstyle) {
          case 0:
            document.writeln("<th style=\"text-align:left;\">―</th>");
            break;
          case 1:
            document.writeln("<th style=\"text-align:center;\">―</th>");
            break;
          case 2:
            document.writeln("<th style=\"text-align:right;\">―</th>");
            break;
          default:
            break;
        } // switch-case文終了
      } // forループ終了
    document.writeln("</tr>"); // 最初の行終了

    for(i=1;i<r;++i){
      document.writeln("<tr>");
      for(j=0;j<c;++j){
        switch (tdstyle) {
          case 0:
            document.writeln("<td style=\"text-align:left;\">―</td>");
            break;
          case 1:
            document.writeln("<td style=\"text-align:center;\">―</td>");
            break;
          case 2:
            document.writeln("<td style=\"text-align:right;\">―</td>");
            break;
          default:
            break;
        } // switch-case文終了
      } // 内側のforループ終了
      document.writeln("</tr>");
    } // 外側のforループ終了

  } else if(thmode == 2){ // 最初の列のみ<th>

    for(i=0;i<r;++i){
      document.writeln("<tr>");

      // 最初の列開始
      switch (thstyle) {
        case 0:
          document.writeln("<th style=\"text-align:left;\">―</th>");
          break;
        case 1:
          document.writeln("<th style=\"text-align:center;\">―</th>");
          break;
        case 2:
          document.writeln("<th style=\"text-align:right;\">―</th>");
          break;
        default:
          break;
      }
      // 最初の列終了

      for(j=1;j<c;++j){
        switch (tdstyle) {
          case 0:
            document.writeln("<td style=\"text-align:left;\">―</td>");
            break;
          case 1:
            document.writeln("<td style=\"text-align:center;\">―</td>");
            break;
          case 2:
            document.writeln("<td style=\"text-align:right;\">―</td>");
            break;
          default:
            break;
        } // switch-case文終了
      } // 内側のforループ終了

      document.writeln("</tr>");
    } // 外側のforループ終了

  } else { // 最初の行と列の両方とも<th>

    document.writeln("<tr>"); // 最初の行開始
      for(j=0;j<c;++j){
        switch (thstyle) {
          case 0:
            document.writeln("<th style=\"text-align:left;\">―</th>");
            break;
          case 1:
            document.writeln("<th style=\"text-align:center;\">―</th>");
            break;
          case 2:
            document.writeln("<th style=\"text-align:right;\">―</th>");
            break;
          default:
            break;
        } // switch-case文終了
      } // forループ終了
    document.writeln("</tr>"); // 最初の行終了

    for(i=1;i<r;++i){
      document.writeln("<tr>");

      // 最初の列開始
      switch (thstyle) {
        case 0:
          document.writeln("<th style=\"text-align:left;\">―</th>");
          break;
        case 1:
          document.writeln("<th style=\"text-align:center;\">―</th>");
          break;
        case 2:
          document.writeln("<th style=\"text-align:right;\">―</th>");
          break;
        default:
          break;
      }
      // 最初の列終了

      for(j=1;j<c;++j){
        switch (tdstyle) {
          case 0:
            document.writeln("<td style=\"text-align:left;\">―</td>");
            break;
          case 1:
            document.writeln("<td style=\"text-align:center;\">―</td>");
            break;
          case 2:
            document.writeln("<td style=\"text-align:right;\">―</td>");
            break;
          default:
            break;
        } // switch-case文終了
      } // 内側のforループ終了

      document.writeln("</tr>");
    } // 外側のforループ終了

  } // if-else文終了

  document.writeln("</table>");

  document.writeln("</div>");
  document.writeln("</body>");
  document.writeln("</html>");
}

JavaScriptサイド(ソースコードを生成する)

var HTMLtableGenerator2nd = function(){
  var thmode; // 見出しタグ<th>の使用に関するモード
  var flagma = document.getElementById("marginauto").checked;
  // 表自身のページ内の位置を中央揃え(センタリング)するフラグ
  var thstyle; // <th>タグのスタイル
  var tdstyle; // <td>タグのスタイル

  var flagfv = document.getElementById("framevoid").checked; // frame属性の値をvoidにするフラグ
  var flagrn = document.getElementById("rulesnone").checked; // rules属性の値をnoneにするフラグ

  var b = parseInt(document.getElementById("border").value); // 枠線の幅を取得
  var r = parseInt(document.getElementById("rows").value); // 行数を取得
  var c = parseInt(document.getElementById("cols").value); // 列数を取得

  // 見出しタグ<th>の使用に関するモード
  if(document.getElementById("none").checked == true){ thmode=0; } // 使用しない
  if(document.getElementById("firstrow").checked == true){ thmode=1; } // 最初の行
  if(document.getElementById("firstcolumn").checked == true){ thmode=2; } // 最初の列
  if(document.getElementById("both").checked == true){ thmode=3; } // 両方

  // <th>タグのスタイル
  if(document.getElementById("thleft").checked == true){ thstyle=0; } // 左揃え
  if(document.getElementById("thcenter").checked == true){ thstyle=1; } // 中央揃え(センタリング)
  if(document.getElementById("thright").checked == true){ thstyle=2; } // 右揃え

  // <td>タグのスタイル
  if(document.getElementById("tdleft").checked == true){ tdstyle=0; } // 左揃え
  if(document.getElementById("tdcenter").checked == true){ tdstyle=1; } // 中央揃え(センタリング)
  if(document.getElementById("tdright").checked == true){ tdstyle=2; } // 右揃え

  document.writeln("<html>");
  document.writeln("<head>");
  document.writeln("<title>表の生成結果(" + r + "行" + c + "列" + ")</title>");
  document.writeln("</head>");
  document.writeln("<body bgcolor=\"#000000\" text=\"#ffa500\">");
  document.writeln("<h1>表の生成結果(" + r + "行" + c + "列" + ")</h1>");

  document.writeln("<pre>");

  document.write("&lt;table border=&quot;" + b + "&quot;");
  if (flagfv) {
    document.write(" frame=&quot;void&quot;");
  }
  if (flagrn) {
    document.write(" rules=&quot;none&quot;");
  }
  if (flagma) {
    document.write(" style=&quot;margin-left:auto;margin-right:auto;text-align:center;&quot;");
  }
  document.writeln("&gt;");

  if(thmode == 0){ // <th>タグを使用しない

    for(i=0;i<r;++i){
      document.writeln("&lt;tr&gt;");
      for(j=0;j<c;++j){
        switch (tdstyle) {
          case 0:
            document.writeln("&lt;td style=&quot;text-align:left;&quot;&gt;―&lt;/td&gt;");
            break;
          case 1:
            document.writeln("&lt;td style=&quot;text-align:center;&quot;&gt;―&lt;/td&gt;");
            break;
          case 2:
            document.writeln("&lt;td style=&quot;text-align:right;&quot;&gt;―&lt;/td&gt;");
            break;
          default:
            break;
        } // switch-case文終了
      } // 内側のforループ終了
      document.writeln("&lt;/tr&gt;");
    } // 外側のforループ終了

  } else if(thmode == 1){ // 最初の行のみ<th>

    document.writeln("&lt;tr&gt;"); // 最初の行開始
      for(j=0;j<c;++j){
        switch (thstyle) {
          case 0:
            document.writeln("&lt;th style=&quot;text-align:left;&quot;&gt;―&lt;/th&gt;");
            break;
          case 1:
            document.writeln("&lt;th style=&quot;text-align:center;&quot;&gt;―&lt;/th&gt;");
            break;
          case 2:
            document.writeln("&lt;th style=&quot;text-align:right;&quot;&gt;―&lt;/th&gt;");
            break;
          default:
            break;
        } // switch-case文終了
      } // forループ終了
    document.writeln("&lt;/tr&gt;"); // 最初の行終了

    for(i=1;i<r;++i){
      document.writeln("&lt;tr&gt;");
      for(j=0;j<c;++j){
        switch (tdstyle) {
          case 0:
            document.writeln("&lt;td style=&quot;text-align:left;&quot;&gt;―&lt;/td&gt;");
            break;
          case 1:
            document.writeln("&lt;td style=&quot;text-align:center;&quot;&gt;―&lt;/td&gt;");
            break;
          case 2:
            document.writeln("&lt;td style=&quot;text-align:right;&quot;&gt;―&lt;/td&gt;");
            break;
          default:
            break;
        } // switch-case文終了
      } // 内側のforループ終了
      document.writeln("&lt;/tr&gt;");
    } // 外側のforループ終了

  } else if(thmode == 2){ // 最初の列のみ<th>

    for(i=0;i<r;++i){
      document.writeln("&lt;tr&gt;");

      // 最初の列開始
      switch (thstyle) {
        case 0:
          document.writeln("&lt;th style=&quot;text-align:left;&quot;&gt;―&lt;/th&gt;");
          break;
        case 1:
          document.writeln("&lt;th style=&quot;text-align:center;&quot;&gt;―&lt;/th&gt;");
          break;
        case 2:
          document.writeln("&lt;th style=&quot;text-align:right;&quot;&gt;―&lt;/th&gt;");
          break;
        default:
          break;
      }
      // 最初の列終了

      for(j=1;j<c;++j){
        switch (tdstyle) {
          case 0:
            document.writeln("&lt;td style=&quot;text-align:left;&quot;&gt;―&lt;/td&gt;");
            break;
          case 1:
            document.writeln("&lt;td style=&quot;text-align:center;&quot;&gt;―&lt;/td&gt;");
            break;
          case 2:
            document.writeln("&lt;td style=&quot;text-align:right;&quot;&gt;―&lt;/td&gt;");
            break;
          default:
            break;
        } // switch-case文終了
      } // 内側のforループ終了
      document.writeln("&lt;/tr&gt;");
    } // 外側のforループ終了

  } else { // 最初の行と列の両方とも<th>

    document.writeln("&lt;tr&gt;"); // 最初の行開始
      for(j=0;j<c;++j){
        switch (thstyle) {
          case 0:
            document.writeln("&lt;th style=&quot;text-align:left;&quot;&gt;―&lt;/th&gt;");
            break;
          case 1:
            document.writeln("&lt;th style=&quot;text-align:center;&quot;&gt;―&lt;/th&gt;");
            break;
          case 2:
            document.writeln("&lt;th style=&quot;text-align:right;&quot;&gt;―&lt;/th&gt;");
            break;
          default:
            break;
        } // switch-case文終了
      } // forループ終了
    document.writeln("&lt;/tr&gt;"); // 最初の行終了

    for(i=1;i<r;++i){
      document.writeln("&lt;tr&gt;");

      // 最初の列開始
      switch (thstyle) {
        case 0:
          document.writeln("&lt;th style=&quot;text-align:left;&quot;&gt;―&lt;/th&gt;");
          break;
        case 1:
          document.writeln("&lt;th style=&quot;text-align:center;&quot;&gt;―&lt;/th&gt;");
          break;
        case 2:
          document.writeln("&lt;th style=&quot;text-align:right;&quot;&gt;―&lt;/th&gt;");
          break;
        default:
          break;
      }
      // 最初の列終了

      for(j=1;j<c;++j){
        switch (tdstyle) {
          case 0:
            document.writeln("&lt;td style=&quot;text-align:left;&quot;&gt;―&lt;/td&gt;");
            break;
          case 1:
            document.writeln("&lt;td style=&quot;text-align:center;&quot;&gt;―&lt;/td&gt;");
            break;
          case 2:
            document.writeln("&lt;td style=&quot;text-align:right;&quot;&gt;―&lt;/td&gt;");
            break;
          default:
            break;
        } // switch-case文終了
      } // 内側のforループ終了
      document.writeln("&lt;/tr&gt;");
    } // 外側のforループ終了

  } // if-else文終了

  document.writeln("&lt;/table&gt;");
  document.writeln("</pre>");

  document.writeln("</body>");
  document.writeln("</html>");
}



参. 択一式問題の生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
選択肢数:<input type="text" id="choice"><br>
問題数:<input type="text" id="problem"><br>
<input type="button" value="生成する" onclick="quizGenerator()">
</form>

JavaScriptサイド

var quizGenerator = function(){
  var i, j; // ループ変数
  var cn = parseInt(document.getElementById(&quot;choice&quot;).value); // 選択肢数
  var pn = parseInt(document.getElementById(&quot;problem&quot;).value); // 問題数

  if(isNaN(cn) == true || isNaN(pn) == true){
    alert(&quot;半角の数値を入力して下さい。&quot;);
    return;
  } // もし、選択肢数や問題数が、半角の数値でなければ、警告を表示し、関数を抜ける。

  document.writeln(&quot;&lt;html&gt;&quot;);
  document.writeln(&quot;&lt;head&gt;&quot;);
  document.writeln(&quot;&lt;title&gt; &quot; + cn + &quot; 者択一式問題 &quot; + pn + &quot; 問の生成&lt;/title&gt;&quot;);
  document.writeln(&quot;&lt;/head&gt;&quot;);
  document.writeln(&quot;&lt;body bgcolor=\&quot;#000000\&quot; text=\&quot;#ffa500\&quot;&gt;&quot;);
  document.writeln(&quot;&lt;h1&gt; &quot; + cn + &quot; 者択一式問題 &quot; + pn + &quot; 問の生成&lt;/h1&gt;&quot;);

  document.writeln(&quot;&lt;h2&gt;JavaScriptサイド(スコア集計と解説表示)&lt;/h2&gt;&quot;);
  document.writeln(&quot;&lt;pre&gt;&quot;);
    document.writeln(&quot;var score = function(){&quot;);
    document.writeln(&quot;&nbsp;&nbsp;var total = 0;&quot;);
    for(i = 0; i &lt; pn; ++i){
      document.writeln(&quot;&nbsp;&nbsp;if(document.exercise.q&quot; + (i+1) + &quot;[].checked == true){  total += 1;  }&quot;);
    }
    document.writeln(&quot;&nbsp;&nbsp;$(&quot;#result&quot;).text(total + &quot;[点]&quot;);&quot;);
    document.writeln(&quot;}&quot;);
    for(i = 0; i &lt; pn; ++i){
      document.writeln(&quot;var flag&quot; + (i+1) + &quot; = 0;&quot;);
    }
    for(i = 0; i &lt; pn; ++i){
      document.writeln(&quot;var ans&quot; + (i+1) + &quot; = function(){&quot;);
      document.writeln(&quot;&nbsp;&nbsp;if(flag&quot; + (i+1) + &quot; == 0){&quot;);
      document.writeln(&quot;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#mes&quot; + (i+1) + &quot;&quot;).text(&quot;【解説】&quot;);&quot;);
      document.writeln(&quot;&nbsp;&nbsp;&nbsp;&nbsp;var flag&quot; + (i+1) + &quot; = 1;&quot;);
      document.writeln(&quot;&nbsp;&nbsp;} else {&quot;);
      document.writeln(&quot;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#mes&quot; + (i+1) + &quot;&quot;).text(&quot;クリックして【解説】を表示&quot;);&quot;);
      document.writeln(&quot;&nbsp;&nbsp;&nbsp;&nbsp;var flag&quot; + (i+1) + &quot; = 0;&quot;);
      document.writeln(&quot;&nbsp;&nbsp;}&quot;);
      document.writeln(&quot;}&quot;);
    }
  document.writeln(&quot;&lt;/pre&gt;&quot;);

  document.writeln(&quot;&lt;hr&gt;&quot;);

  document.writeln(&quot;&lt;h2&gt;HTMLサイド&lt;/h2&gt;&quot;);
  document.writeln(&quot;&lt;pre&gt;&quot;);
    document.writeln(&quot;&lt;form name=&quot;exercise&quot;&gt;&quot;);
    document.writeln(&quot;&lt;dl&gt;\n&quot;);
    for(i = 0; i &lt; pn; ++i){
      document.writeln(&quot;&nbsp;&nbsp;&lt;dt&gt;問&quot; + (i+1) + &quot;()&lt;/dt&gt;&quot;);
      document.writeln(&quot;&nbsp;&nbsp;&lt;dd&gt;&lt;p&gt;&lt;br&gt;&quot;);
      for(j = 0; j &lt; cn; ++j){
        document.write(&quot;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;q&quot; + (i+1) + &quot;&quot;&quot;);
        document.writeln(&quot;&nbsp;value=&quot;&quot; + j +&quot;&quot;&gt;&lt;br&gt;&quot;);
      } // ラジオボタンの生成
      document.write(&quot;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;mes&quot; + (i+1) + &quot;&quot;&quot;);
      document.writeln(&quot;&nbsp;onclick=&quot;ans&quot; + (i+1) + &quot;()&quot;&gt;クリックして【解説】を表示&lt;/div&gt;&quot;);
      document.writeln(&quot;&nbsp;&nbsp;&lt;/p&gt;&lt;/dd&gt;\n&quot;);
    }
    document.writeln(&quot;&lt;/dl&gt;&quot;);
    document.writeln(&quot;&nbsp;&nbsp;&lt;input type=&quot;button&quot; value=&quot;採点する&quot; onclick=&quot;score()&quot;&gt;&quot;);
    document.writeln(&quot;&nbsp;&nbsp;&lt;div id=&quot;result&quot;&gt; [点]&lt;/div&gt;&quot;);
    document.writeln(&quot;&lt;/form&gt;&quot;);
  document.writeln(&quot;&lt;/pre&gt;&quot;);

  document.writeln(&quot;&lt;/body&gt;&quot;);
  document.write(&quot;&lt;/html&gt;&quot;);
}



Shadow Academy トップへ戻る

inserted by FC2 system