Mの備忘録 - Carnet de M -

　子どもの学習用に作成したAnkiアプリの問題テンプレート置き場。随時予定。

AnkiMobile Flashcards

• 

内容

　Ankiアプリだけで小学校からの勉強の復習を完結できるのか？という実験で作成した問題テンプレートを紹介する。

　動作確認は、iPad（iPadOS）、iPhone（iOS）。

2022 Apple 10.9インチiPad (Wi-Fi, 64GB) - ピンク (第10世代)

• Amazon

デッキへの追加方法

・Ankiアプリで表面と裏面だけのシンプルなノートタイプ・デッキを作成する。

・デッキにカードを追加する際に、右上のHTMLエディタを押して、表面と裏面のテンプレートをそれぞれコピーしてペーストする。

小学校１年生

　文部科学省の学習指導要領や実際の教科書、問題集などを参考に作成。

算数問題

時刻を読む問題

B　量と測定
（2）　日常生活の中で時刻を読むことができるようにする。

文部科学省, 学習指導要領「生きる力」https://www.mext.go.jp/a_menu/shotou/new-cs/youryou/syo/san.htm

カード表面で、ランダムな時間を表示し、裏面でその答えを表示する。

テンプレート表示する

カード表面

<h1>なんじなんぷんですか？</h1>
<canvas id="canvas" width="200" height="200"></canvas>
<h1><div id="clock"></div></h1>
<script type="text/javascript">
    // sessionStorage用の接頭文字
    var id = "anki/";
		// Canvas要素の取得
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

    // 画質を2倍にする
    canvas.width = canvas.width * 2;
    canvas.height = canvas.height * 2;
    ctx.scale(2, 2);

		// Canvas時計の中心座標
		var centerX = canvas.width / 4;
		var centerY = canvas.height / 4;

		// Canvas時計の半径
		var radius = 70;

		// 時計の面を描画する関数
		function drawClockFace() {
			ctx.beginPath();
			ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
			ctx.fillStyle = "white";
			ctx.fill();
			ctx.lineWidth = 3;
			ctx.strokeStyle = "black";
			ctx.stroke();

			// 1~12の数字を描画する
			ctx.font = "18px Arial";
			ctx.fillStyle = "black";
			ctx.textAlign = "center";
			ctx.textBaseline = "middle";
			for (var i = 1; i <= 12; i++) {
				var angle = (i - 3) * Math.PI / 6;
				var x = centerX + (radius - 20) * Math.cos(angle);
				var y = centerY + (radius - 20) * Math.sin(angle);
				ctx.fillText(i, x, y);
			}

			// 1分ごとの目盛りを描画する
			ctx.lineWidth = 1;
			ctx.strokeStyle = "black";
			for (var i = 0; i < 60; i++) {
				var angle = (i - 15) * Math.PI / 30;
				var x1 = centerX + (radius - 10) * Math.cos(angle);
				var y1 = centerY + (radius - 10) * Math.sin(angle);
				var x2 = centerX + (radius - 5) * Math.cos(angle);
				var y2 = centerY + (radius - 5) * Math.sin(angle);
				ctx.beginPath();
				ctx.moveTo(x1, y1);
				ctx.lineTo(x2, y2);
				ctx.stroke();
			}
            // 5分ごとの目盛りを描画する
            ctx.lineWidth = 2;
            for (var i = 0; i < 60; i += 5) {
                var angle = (i - 15) * Math.PI / 30;
                var x1 = centerX + (radius - 11) * Math.cos(angle);
                var y1 = centerY + (radius - 11) * Math.sin(angle);
                var x2 = centerX + (radius - 5) * Math.cos(angle);
                var y2 = centerY + (radius - 5) * Math.sin(angle);
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.stroke();
            }    
		}

		// 針を描画する関数
		function drawHand(angle, length, width, color) {
			ctx.beginPath();
			ctx.lineWidth = width;
			ctx.strokeStyle = color;
			ctx.moveTo(centerX, centerY);
			// 修正：長針と短針の角度のオフセットを修正
			ctx.lineTo(centerX + length * Math.sin(angle), centerY - length * Math.cos(angle));
			ctx.stroke();
		}

    // ランダムな整数を返す関数
		function getRandomInt(min, max) {
			return Math.floor(Math.random() * (max - min + 1) + min);
		}
		// 時計を更新する関数
		function questionClock() {
			// 時刻を指定する
			var hours = getRandomInt(1,12);
			var minutes = getRandomInt(0,59);

            sessionStorage.setItem(id+"hours", hours.toString());
            sessionStorage.setItem(id+"minutes", minutes.toString());

			// 時針を描画する
			var hourAngle = (hours % 12) * Math.PI / 6 + (minutes / 60) * Math.PI / 6;
			drawHand(hourAngle, radius * 0.5, 5, "black");

			// 分針を描画する
			var minuteAngle = minutes * Math.PI / 30;
			drawHand(minuteAngle, radius * 0.8, 4, "black");
		}

		// 時計の面を描画する
    drawClockFace();
    questionClock();
	</script>

カード裏面

<h1>こたえ</h1>
<canvas id="canvas" width="200" height="200"></canvas>
<h1><div id="clock"></div></h1>
<script type="text/javascript">
    // sessionStorage用の接頭文字
    var id = "anki/";
		// Canvas要素の取得
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

    // 画質を2倍にする
    canvas.width = canvas.width * 2;
    canvas.height = canvas.height * 2;
    ctx.scale(2, 2);

		// Canvas時計の中心座標
		var centerX = canvas.width / 4;
		var centerY = canvas.height / 4;

		// Canvas時計の半径
		var radius = 70;

		// 時計の面を描画する関数
		function drawClockFace() {
			ctx.beginPath();
			ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
			ctx.fillStyle = "white";
			ctx.fill();
			ctx.lineWidth = 3;
			ctx.strokeStyle = "black";
			ctx.stroke();

			// 1~12の数字を描画する
			ctx.font = "18px Arial";
			ctx.fillStyle = "black";
			ctx.textAlign = "center";
			ctx.textBaseline = "middle";
			for (var i = 1; i <= 12; i++) {
				var angle = (i - 3) * Math.PI / 6;
				var x = centerX + (radius - 20) * Math.cos(angle);
				var y = centerY + (radius - 20) * Math.sin(angle);
				ctx.fillText(i, x, y);
			}

			// 1分ごとの目盛りを描画する
			ctx.lineWidth = 1;
			ctx.strokeStyle = "black";
			for (var i = 0; i < 60; i++) {
				var angle = (i - 15) * Math.PI / 30;
				var x1 = centerX + (radius - 10) * Math.cos(angle);
				var y1 = centerY + (radius - 10) * Math.sin(angle);
				var x2 = centerX + (radius - 5) * Math.cos(angle);
				var y2 = centerY + (radius - 5) * Math.sin(angle);
				ctx.beginPath();
				ctx.moveTo(x1, y1);
				ctx.lineTo(x2, y2);
				ctx.stroke();
			}
            // 5分ごとの目盛りを描画する
            ctx.lineWidth = 2;
            for (var i = 0; i < 60; i += 5) {
                var angle = (i - 15) * Math.PI / 30;
                var x1 = centerX + (radius - 11) * Math.cos(angle);
                var y1 = centerY + (radius - 11) * Math.sin(angle);
                var x2 = centerX + (radius - 5) * Math.cos(angle);
                var y2 = centerY + (radius - 5) * Math.sin(angle);
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.stroke();
            }           

		}

		// 針を描画する関数
		function drawHand(angle, length, width, color) {
			ctx.beginPath();
			ctx.lineWidth = width;
			ctx.strokeStyle = color;
			ctx.moveTo(centerX, centerY);
			// 修正：長針と短針の角度のオフセットを修正
			ctx.lineTo(centerX + length * Math.sin(angle), centerY - length * Math.cos(angle));
			ctx.stroke();
		}

    // ランダムな整数を返す関数
		function getRandomInt(min, max) {
			return Math.floor(Math.random() * (max - min + 1) + min);
		}
		// 時計を更新する関数
		function answerClock() {
			// 時刻を指定する
			var hours = Number(sessionStorage.getItem(id+"hours"));
			var minutes = Number(sessionStorage.getItem(id+"minutes"));
            var clockElement = document.getElementById("clock");
            clockElement.innerHTML = hours+ "じ："+minutes+"ふん";//sessionStorage.getItem(id+"answer");

			// 時針を描画する
			var hourAngle = (hours % 12) * Math.PI / 6 + (minutes / 60) * Math.PI / 6;
			drawHand(hourAngle, radius * 0.5, 5, "black");

			// 分針を描画する
			var minuteAngle = minutes * Math.PI / 30;
			drawHand(minuteAngle, radius * 0.8, 4, "black");
		}

		// 時計の面を描画する
    drawClockFace();
    answerClock();
	</script>

テンプレート閉じる

めもりを読む問題

B　量と測定
（1）　大きさを比較するなどの活動を通して，量とその測定についての理解の基礎となる経験を豊かにする。

文部科学省, 学習指導要領「生きる力」https://www.mext.go.jp/a_menu/shotou/new-cs/youryou/syo/san.htm

１から１２０までの、かずの線を見て、①から③のめもりが示す値を読む問題。

テンプレート表示する

カード表面

<h2>かずのせんを　みて、　①、②、③の　めもりが　あらわす　かずを　いいましょう。</h2>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var id = "anki/";
// Canvasサイズの設定
canvas.width = 900;
canvas.height = 100;

        // 画質を2倍にする
        canvas.width = canvas.width * 2;
        canvas.height = canvas.height * 2;
        ctx.scale(2, 2);
// ものさしの長さ
var rulerLength = 125;

// 1cmあたりのPixel数
var pixelPerCm = (canvas.width/2 - 100) / rulerLength; // 左右に50pxずつ余白を設ける

// 目盛りの長さ
var tickLength = 25;

// 目盛りの文字列のフォント
ctx.font = '12px sans-serif';

// ものさしの描画
ctx.beginPath();
ctx.lineWidth = 3;
ctx.moveTo(50, canvas.height / 4);
ctx.lineTo(canvas.width /2 - 50, canvas.height / 4);
ctx.stroke();

ctx.lineWidth = 1;
// 目盛りと数字の描画
for (let i = 0; i <= rulerLength; i++) {
  // 目盛りの長さ
  let tickLen = tickLength / 2; // 初期値は短めのtickLengthにする

  if (i % 10 === 0) {
    tickLen = tickLength * 1.3; // 10の倍数の場合は長めのtickLengthにする
  } else if (i % 5 === 0) {
    tickLen = tickLength; // 5の倍数の場合は普通のtickLengthにする
  }
  // 目盛りの描画
  ctx.beginPath();
  ctx.moveTo(50 + i * pixelPerCm, canvas.height / 4);
  ctx.lineTo(50 + i * pixelPerCm, canvas.height / 4 + tickLen / 2);
  ctx.stroke();
  
  ctx.font = "18px Arial";
  if (i % 10 == 0) {
  var textWidth = ctx.measureText(i).width; // 文字列の幅を取得
  ctx.fillText(i, 50 + i * pixelPerCm - textWidth / 2, canvas.height / 4 + tickLength + 6);
}

}
// 3つのランダムな数値を生成し、矢印を描画する
for (var i = 1; i <= 3; i++) {
 var randomNum = Math.floor(Math.random() * (rulerLength + 1)); // 0からrulerLengthまでのランダムな整数
 sessionStorage.setItem(id+"mem"+i, randomNum.toString());
  ctx.beginPath();
  ctx.lineWidth = 1;
  ctx.moveTo(50 + randomNum * pixelPerCm, canvas.height / 4);
  ctx.lineTo(50 + randomNum * pixelPerCm, canvas.height / 4 - 30 / 2);
  ctx.stroke();

  // 矢印の上に数字を表示する
  ctx.font = "bold 18px Arial";
  var textWidth = ctx.measureText(i).width; // 文字列の幅を取得
  ctx.fillText(`①②③`[i - 1], 50 + randomNum * pixelPerCm - textWidth / 2 - 4, canvas.height / 4 - 20);
}

</script>

カード裏面

<h1>こたえ</h1>
<canvas id="canvas" width="900" height="100"></canvas>
<h1><div id="answer"></div></h1>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var id = "anki/";

        // 画質を2倍にする
        canvas.width = canvas.width * 2;
        canvas.height = canvas.height * 2;
        ctx.scale(2, 2);
// ものさしの長さ
var rulerLength = 125;

// 1cmあたりのPixel数
var pixelPerCm = (canvas.width/2 - 100) / rulerLength; // 左右に50pxずつ余白を設ける

// 目盛りの長さ
var tickLength = 25;

// 目盛りの文字列のフォント
ctx.font = '12px sans-serif';

// ものさしの描画
ctx.beginPath();
ctx.lineWidth = 3;
ctx.moveTo(50, canvas.height / 4);
ctx.lineTo(canvas.width /2 - 50, canvas.height / 4);
ctx.stroke();

ctx.lineWidth = 1;
// 目盛りと数字の描画
for (let i = 0; i <= rulerLength; i++) {
  // 目盛りの長さ
  let tickLen = tickLength / 2; // 初期値は短めのtickLengthにする

  if (i % 10 === 0) {
    tickLen = tickLength * 1.3; // 10の倍数の場合は長めのtickLengthにする
  } else if (i % 5 === 0) {
    tickLen = tickLength; // 5の倍数の場合は普通のtickLengthにする
  }
  // 目盛りの描画
  ctx.beginPath();
  ctx.moveTo(50 + i * pixelPerCm, canvas.height / 4);
  ctx.lineTo(50 + i * pixelPerCm, canvas.height / 4 + tickLen / 2);
  ctx.stroke();
  
  ctx.font = "18px Arial";
  if (i % 10 == 0) {
  var textWidth = ctx.measureText(i).width; // 文字列の幅を取得
  ctx.fillText(i, 50 + i * pixelPerCm - textWidth / 2, canvas.height / 4 + tickLength + 6);
}

}

var answerText = "";
// 3つのランダムな数値を生成し、矢印を描画する
for (var i = 1; i <= 3; i++) {
  var randomNum =  Number(sessionStorage.getItem(id+"mem"+i));
  ctx.beginPath();
  ctx.lineWidth = 1;
  ctx.moveTo(50 + randomNum * pixelPerCm, canvas.height / 4);
  ctx.lineTo(50 + randomNum * pixelPerCm, canvas.height / 4 - 30 / 2);
  ctx.stroke();

  answerText = answerText + `①②③`[i - 1] + " は " + randomNum + "です。<BR>";
   // 矢印の上に数字を表示する
  ctx.font = "bold 18px Arial";
  var textWidth = ctx.measureText(i).width; // 文字列の幅を取得
  ctx.fillText(`①②③`[i - 1], 50 + randomNum * pixelPerCm - textWidth / 2 - 4, canvas.height / 4 - 20);
}
        var answerElement = document.getElementById("answer");
        answerElement.innerHTML = answerText;
</script>

テンプレート閉じる

語学習得の神アプリ　Ankiを極める！: 英・仏・独・検1級の著者がノウハウを惜しみなく伝授！ Anki活用ノウハウ Kindle版

• Amazon