勉強用Google Apps Script (Quiz Script)

Googleドライブのスプレッドシートに問題と答のリストを作成しておくと、ランダムで問題を出題してくれるスクリプトを作成しました。

アクチュアリー試験の勉強用に作成しましたが、つまりはクイズを出してくれるスクリプトです。

早速コードです。

SpreadsheetApp.openByUrlには問題と答えのリストのあるスプレッドシートのURLをセットします。

スクリプトエディタに下記のコードを書いて、公開 - ウェブアプリケーションとして導入 すればOK。（スクリプトの承認等の一般的な手順は別途必要です。）

その他、留意点等はコードの後に。

function doGet(e) {

    var app = UiApp

        .createApplication()

        .setTitle("クイズ");

    

    var panel = 

        app.createVerticalPanel()

        .setSpacing(100)

        .setWidth("100%");

    app.add(panel);

    var quiz = 

        app.createHTML()

        .setStyleAttribute("fontSize","300%")

        .setId("quiz")

        .setText("");

    panel.add(quiz);

  

    var clickhandler = 

        app.createServerClickHandler("onbtnclick")

        .addCallbackElement(panel);

    var btn = 

        app.createButton("こたえをみる")

        .setSize("100%","200%")

        .setStyleAttributes({fontSize: "300%",background: "#50B8D8", color: "white"})

        .setId("btn")

        .addClickHandler(clickhandler);

    panel.add(btn);

  

    var answer = 

        app.createHTML()

        .setStyleAttribute("fontSize","300%")

        .setId("answer")

        .setText("");

        

    panel.add(answer);  

  

    new_quiz();

  

    return app;

}

function onbtnclick(e){

    var app = UiApp.getActiveApplication();

    var answer = app.getElementById("answer");

    var btn = app.getElementById("btn");

  

  if(UserProperties.getProperty("status") == "hide"){

    answer.setHTML(UserProperties.getProperty("answer_text").replace(/\n/g,"<br/>"));

    btn.setText("つぎのもんだい")

    UserProperties.setProperty("status", "view");

  } else {

    new_quiz();

    btn.setText("こたえをみる")

    UserProperties.setProperty("status", "hide");

  }

    return app;

}

function new_quiz()

{

    var sheet = 

        SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxx/')

        .getSheetByName('List');

    var max_r = sheet.getLastRow() - 1;

    var r = Math.floor(Math.random() * max_r) + 2;

    var app = UiApp.getActiveApplication(); 

    var quiz = app.getElementById("quiz");

    var answer = app.getElementById("answer");

  

    quiz.setHTML(sheet.getRange("B" + r).getValue().replace(/\n/g,"<br/>"));

    answer.setText("");

    UserProperties.setProperty("answer_text", sheet.getRange("C" + r).getValue());

    UserProperties.setProperty("status", "hide");

}

• コーディングのスタートは https://docs.google.com/presentation/d/1ajxiYl4OAUQyZsXbtOH4s0BDGbWh3CNQtS5fo-zztAs/edit#slide=id.g1036e1a59_058 を参考にしました。　・・・あまり見る影もない感じになってしまいましたが。
• スプレッドシートはListシートのB列に問題、C列に答という形式です。その他の形式の場合はnew_quiz()の中のパラメータを変更して下さい。
• ちなみにB列に問題、C列に答というのは、問題の追加登録を「フォーム」機能を使って行うのに便利です。
• デフォルトのボタンは結構ダサイので、画像を使うなりした方が断然いいと思います。私はとりあえず色だけ変えてみましたが、それでもデフォルトよりはマシに。
• 問や答のウィジェットをLabelで作ると、改行コードが反映されません。HTMLウィジェットを使用することで改行させて表示できます。ただし、スプレッドシートでの改行は \n を使用していますが、HTMLにセットするにあたって <br/> に置換する必要があります。
• replace(/\n/,"<br/>")が置換のメソッドです。ただし、これだと1つ目の \n しか置換されないので、replace(/\n/g,"<br/>")とする必要があります。