塾屋が作る「無限学習マシン」
中学生用「無限学習マシン」の試運転版を作りました。興味のある中学生、学校や学習塾の先生たち、中学生のお子さんがいる保護者の方など・・・もしよければ試してみてください。
あくまでこれは「プログラミング学習動画」のために作成したWebページなので、もちろん無料だしリンクや生徒(あるいはお子様)への学習指示利用などすべてご自由にどうぞ。
ま、その程度のものなので、今後のコンテンツ増強などはまったくの未定ですが。
無限学習マシン【計算練習編】はコチラ
無限学習マシン【連立方程式の文章題編】はコチラ
こちらが本題「今回の動画で記述したコード」掲載
今回のプログラミング学習動画
「この一本でプログラミングができる気分になる動画」で書いたコードを掲載しておきます。
※前項の「無限学習マシン」は別コードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="machine.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_CHTML"></script>
</head>
<body>
<h2>無限学習マシン</h2>
<button onclick="calc()">連立方程式の計算</button>
<button onClick="salt()">食塩水の文章題</button>
<h3>問題</h3>
<div id="questionArea">問題表示エリア</div>
<button onclick="show()">解答表示</button>
<h3>解答</h3>
<div id="answerArea">解答表示エリア</div>
<script src="machine.js"></script>
</body>
</html>
@charset "UTF-8";
h2{
color:red;
margin:0;
}
button{
width:150px;
}
h3{
margin:30px 0 0 10px;
}
#questionArea{
font-size:25px;
}
#answerArea{
font-size:20px;
}
let question = document.getElementById("questionArea");
let answer = document.getElementById("answerArea");
function calc(){
question.innerHTML = "\\(ax^2+bx+c=0\\)";
answer.innerHTML = "\\[x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}\\]"
answer.style.color = "white";
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question"]);
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"answer"]);
}
function salt(){
let a, b, c, d, e, f, g;
do{
a = Math.floor(Math.random()*5)+1;
b = Math.floor(Math.random()*5)+8;
c = Math.floor(Math.random()*10)+2;
d = (Math.floor(Math.random()*5)+1)*10;
}while(c<=a || c>=b);
e = (b-a)*d;
f = (b-c)*d;
g = (c-a)*d;
question.innerHTML = a+"%と"+b+"%の食塩水があります。これを混ぜて"+c+"%の食塩水を"+e+"g作るにはそれぞれ何gずつ混ぜたらよいか求めなさい。";
answer.innerHTML = a+"%:"+f+"g<br>"+b+"%:"+g+"g";
answer.style.color = "white";
}
function show(){
answer.style.color = "red";
}
console.log("記号「\\」はエスケープシーケンスの目印記号です。この記号自体を表示するには「\\\\」と記述します。")