Command disabled: backlink

暗記用にマスクをめくったり戻したりできるjavascript書いた。

こいつを任意のHTMLにロードすると、"tng"クラスを指定したspan要素が全部####でマスクされる。矢印キーの左右でマスクを開いたり戻したりする。

DEMO

anki.js
var tangoMask = "####";
var tangoMaskColor = "red";
var tangoClass = "tng";
 
var tangoElems;
var tangoIdx;
var tangoMemory;
 
function keyhandle(e) {
  if (document.all) { e = event; } //IE
  if (e.keyCode == 39) { tango_forward(); }
  if (e.keyCode == 37) { tango_backward(); }
  return true;
}
 
function tango_gather() {
  var tmp = document.getElementsByTagName("span");
  tangoElems = new Array();
  for (var i=0; i<tmp.length; i++) {
    if (tmp[i].className == tangoClass) {
      tangoElems.push(tmp[i]);
    }
  }
  tangoIdx = 0;
  tangoMemory = new Array(tangoElems.length+1);
  for (var i=0; i<tangoElems.length; i++) {
    tangoMemory[i] = tangoElems[i].innerHTML;
    tangoElems[i].innerHTML = tangoMask;
    tangoElems[i].style.color = tangoMaskColor;
  }
}
 
function tango_forward() {
  if (tangoIdx >= tangoElems.length) { return; }
  tangoElems[tangoIdx].innerHTML = tangoMemory[tangoIdx];
  tangoIdx++;
}
 
function tango_backward() {
  if (tangoIdx <= 0) { return; }
  tangoIdx--;
  tangoElems[tangoIdx].innerHTML = tangoMask;
}
 
function tango_init() {
  document.onkeydown = keyhandle;
  tango_gather();
}
 
window.onload = tango_init;

で、これを使って問題集を自動生成するcgiスクリプトも書いた。例えば下のようなもの。python製。

さっきのanki.jsをcgiと(ここでは)同じディレクトリに置いてアクセスするだけ。問題集の行がシャッフルされて表示される。

anki.cgi
#!/usr/bin/env python
# -*- coding: utf8 -*-
 
import random
 
qs = []
for i in open("data.txt"):
  qs.append(i[:-1].split(" "))
 
print "Content-Type: text/html\n"
 
print """<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script src="./anki.js" type="text/javascript"></script>
<title>anki 100</title>
</head>
<body>
<h1>百人一首を暗記してみるシステム</h1>
<p>説明:カーソルキーの右左で、マスクをめくったりもどしたりできるよ</p>
<ul>
"""
 
random.shuffle(qs)
 
for i in qs:
  print "<li>%s" % i[0],
  for ii in i[1:]:
    print "<span class='tng'>%s</span>" % ii,
  print "</li>"
 
print "</ul>"
print "</body></html>"

問題集は、cgiスクリプトが要請するとおり、data.txt というファイルを作っておいて、これもcgiと同じディレクトリに置いておく。

data.txt
秋の田の かりほの庵の 苫をあらみ 我が衣手は 露にぬれつつ (天智天皇)
春過ぎて 夏来にけらし 白妙の 衣ほすてふ 天の香具山 (持統天皇)
あしびきの 山鳥の尾の しだり尾の ながながし夜を ひとりかも寝む (柿本人麻呂)

とかこんな調子で。

 
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki