Kusakar ISM

【豆知識】自分のスマホに表示されたQRコードを、そのまま読み込む方法。

無限学習マシン！ ※「この一本でプログラミングができる気分になる動画」のコード掲載

JavaScript
目次

塾屋が作る「無限学習マシン」

中学生用「無限学習マシン」の試運転版を作りました。興味のある中学生、学校や学習塾の先生たち、中学生のお子さんがいる保護者の方など・・・もしよければ試してみてください。

あくまでこれは「プログラミング学習動画」のために作成した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("記号「\\」はエスケープシーケンスの目印記号です。この記号自体を表示するには「\\\\」と記述します。")

JavaScriptの最新記事