「クイズ/編集方法/入力フォーム」の編集履歴（バックアップ）一覧はこちら

「クイズ/編集方法/入力フォーム」(2013/05/19 (日) 01:05:04) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

クイズ入力の入力の助けになればと思い整形用フォームを作成しました。
情報を入力すると下部のテキストボックスに整形済みテキストが表示されるのでクイズ一覧に貼り付けてください。

#js()
{{{{
var ids=["quiz","ansRatio","choice1","choice2","choice3","choice4","answer","remark"];

// フォームの初期化
window.onload = function(){
    var input = document.getElementById("loadText").innerHTML="クイズの入力";
    for (var i = 0; i < 8; i++) {
        var input = document.getElementById(ids[i]);
        input.onfocus = OnFocusQuizForm;
        input.onblur = OnBlurQuizForm;
        input.onkeypress = pressEnter;
        input.onfocus = OnFocusQuizForm;
        input.disabled = false;
    }
    var button1 = document.getElementById("createQuiz");
    button1.onclick = create;
    button1.disabled = false;
    var button2 = document.getElementById("resetQuiz");
    button2.onclick = clr;
    button2.disabled = false;
}

// Enterキーの動作
function pressEnter(event){
    if( event.keyCode == 13 ){
        var tab = document.activeElement.tabIndex;
        if( tab == 8 ){
            create();
            document.getElementById("quiz").focus();
        }
        else{
            document.getElementById(ids[tab]).focus();
        }
    }
}

// フォーカスの保持
var focusedIndex=1;
function OnFocusQuizForm(){
    focusedIndex;
}

// クイズのフォーマットしたテキストを出力
function create() {
    var formatedText = "#divclass(qtitle){|" + document.getElementById("quiz").value + "|RIGHT:正解率:" + document.getElementById("ansRatio").value + "%|}\n#divclass(choise){";
    for(var i = 0; i < 4; i++){
        formatedText += "|" + (i+1) + "."+ document.getElementById(ids[i+2]).value;
    }
    formatedText += "|}\n";
    formatedText += "#openclose(text=答え){" + document.getElementById("answer").value;
    
    var remark = document.getElementById("remark").value;
    if(!(remark == "備考" || remark == "")){
        formatedText += "&br()" + remark;
    }

    document.getElementById("formated").value = formatedText + "}";;
}


// テキストボックスの文字を消去する
function clr() {
    for (var i = 0; i < 8; i++) {
        var input = document.getElementById(ids[i]);
        input.style.color = "GrayText";
        input.value = input.defaultValue;
    }
}

// テキストボックスの文字を消す
function OnFocusQuizForm(input) {
    var target = input.currentTarget;
    if (target.value == target.defaultValue) {
        target.value = '';
        target.style.color = ""
    }
}
//  テキストボックスの文字を再表示する
function OnBlurQuizForm(input) {
    var target = input.currentTarget;
    if (target.value == '') {
        target.style.color = "GrayText"
        target.value = target.defaultValue;
    }
}
}}}}
#html2(){{{
<div id="loadText">読み込み中です</div>
<table name="quizform" style="border:none; width:690px; padding:5px;">
 <tr style="border:none; padding:1px;">
  <td colspan="4" style="width:620px; padding:1px;"><input type="text" id="quiz"     tabindex = 1 style="color:GrayText; width:620px; height:20px;" disabled="true" size="90" value="クイズの内容を入力" /></td>
  <td colspan="1" style="width:60px;  padding:1px;"><input type="text" id="ansRatio" tabindex = 2 style="color:GrayText; width:60px;  height:20px;" disabled="true" size="25" value="正解率" /></td>
 </tr><tr style="border:none; padding:1px;">
  <td style="width:170px; padding:1px;"><input type="text" id="choice1" tabindex = 3 style="color:GrayText; width:165px; height:20px;" disabled="true" value="選択肢1" /></td>
  <td style="width:170px; padding:1px;"><input type="text" id="choice2" tabindex = 4 style="color:GrayText; width:165px; height:20px;" disabled="true" value="選択肢2" /></td>
  <td style="width:170px; padding:1px;"><input type="text" id="choice3" tabindex = 5 style="color:GrayText; width:165px; height:20px;" disabled="true" value="選択肢3" /></td>
  <td style="width:170px; padding:1px;" colspan="2"><input type="text"  tabindex = 6 id="choice4" style="color:GrayText; width:168px; height:20px;" disabled="true" value="選択肢4" /></td>
 </tr><tr style="border:none; padding:1px;">
  <td colspan="5" style="padding:1px;"><input type="text" id="answer" tabindex = 7 style="color:GrayText; width:689px; height:20px;" disabled="true" value="答え" /></td>
 </tr><tr style="border:none; padding:1px;">
  <td colspan="5" style="padding:1px;"><input type="text" id="remark" tabindex = 8 style="color:GrayText; width:689px; height:20px;" disabled="true" value="備考" /></td>
 </tr><tr style="border:none; padding:1px; border:none">
  <td colspan="5" style="border:none">
   <div align="right">
    <input id="createQuiz" type="button" value="作成"  style="width:100px;" disabled="true" />
    <input id="resetQuiz"  type="reset" value="クリア" style="width:100px;" disabled="true" />
 </div></td></tr>
</table>
<textarea id="formated" style="resize:none; width:690px" rows="5"></textarea>
}}}

クイズ入力の入力の助けになればと思い整形用フォームを作成しました。
情報を入力すると下部のテキストボックスに整形済みテキストが表示されるのでクイズ一覧に貼り付けてください。

#include(スクリプト置き場/クイズ入力フォーム)