2014年3月6日木曜日

勉強用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/>")とする必要があります。


11 件のコメント:

  1. はじめまして。
    私も同じようなものを作成したいと思い、ただ、プログラムの一切の知識がないため、サンプルを何とか見つけ出し加工して作ってみようと検索したころ、quizアプリを見つけ参考にさせて頂いています。
    ただ、追加したい機能がありまして、
     1.「こたえをみる」 ボタンを押すと 「解説をみる」 ボタンが作成される。
     2.「つぎのもんだい」 ボタンをおすと 「解説をみる」 ボタンが消え、次の問題が表示される。
     3.「解説をみる」 ボタンをおすと、youtube画像が表示される。
    の3つなんです。
    1.は出来たのですが、2.の「解説ボタン」を消すことがどうもできなくて困っています(youtubeの再生も検討がついていませんが…)。
    ご教授願いかと思いましてコメントさせていただきました。

    返信削除
    返信
    1. 初めまして。参考にしていただいてありがとうございます。
      私自身も何をやっていたか既にあまり覚えていないのですが(^^;、ちょっと考えてみます。来週末になってしまうかもしれませんが・・すみません。

      削除
    2. 突然のコメントとお願いにも関わらずありがとうございます。
      色々なサイトを参考にするんですが、如何せん知識ゼロなの見よう見まねでして。
      deleteかnullかdisplay="none"辺りでどうにかなりそう、というところまで分かったのですが、それをgoogle app scriptでどうやるかが分からなくて。
      どうかよろしくお願いいたします。

      削除
  2. たびたび申し訳ありません。
    少し考えを変えて、「解説ボタン」を作成するのではなく、問題や答えと同様に「解説をみる」というテキストを表示させ、そこからリンクを飛ばそうと考えました。で、「解説をみる」というテキストそのものは表示させられたのですが、そこへのリンクがどうしても貼れません。

    リンクそのものはcreateAnchorを使って晴れるのですが、それをsetPropatyにうまく格納できないでいます。
    そこさえクリアできれば何とか形になるのですが、そこだけがどうしてもうまく行きません。

    先日の質問と少し変わってしまい申し訳ないのですが、どうかお力をお貸しください。

    返信削除
    返信
    1. ご返信遅くなりました。

      私の方でもやってみましたが、確かにうまくリンクが張れないですね・・。いくつか試したり調べたりしてみましたが、同じくよくわかりませんでした。

      お力になれずすみません。

      削除
    2. どうも <a> タグ自体が使えないらしく、ここで書いた方式そのままではダメで、おっしゃる通りcreateAnchorを使って・・とやる必要があるようですが、いまいち使い方がよくわかりませんでした。
      http://stackoverflow.com/questions/18832598/google-sites-apps-script-to-create-html-with-hyperlink
      で使い方が(英語ですが)書いてあるので、もしかしたら参考になるかも知れませんが・・すみません。

      削除
    3. ありがとうございました。
      色々しらべていくうちに何とか出来ました‼
      そして、作成したリンク付き「解説」テキストもうまく消す事ができました‼

      本当にありがとうございましたm(_ _)m

      削除
    4. おめでとうございます!
      素晴らしいです。そしてお役に立てずすみませんでした(^_^;;

      有意義なツールになることをお祈りしています。

      削除
  3. ご無沙汰しております。
    最初の質問から1年が経ちました。
    ちなみに、konさんのスクリプトを参考にさせていただいて、こんな物ができあがりました。
    https://sites.google.com/site/apfcapkclms/hewo-mian-qiangshiyokka/home/shu-de-lun-li_jiao-yuan-shao-jie/-shu-de-lun-li

    趣味程度で作ったものなので、商品としても売れず、職場でもあまり評価されず^^;
    ただ、このクイズの裏で動いているスプレッドシートデータベースの方がクローズアップされ、その作成&管理を任されています。ただ、そろそろ、100万セル近くになってきたので動作が遅くなってきました…^^;

    ここのスクリプトが無かったら、私の今の展開はありませんでした。
    御礼とご報告を兼ねてコメントをさせていただきました。
    本当にありがとうございました。m(_ _)m

    返信削除
    返信
    1. お久しぶりです。

      簡単な記事でしたが、色々きっかけになったなら書いた甲斐もありました!
      わざわざご丁寧にありがとうございますm(_ _)m

      削除