Javascriptで計算ドリルを作りたい

Question

現在、javascriptで計算ドリルを作っています。
1つのページに1つ問題が繰り返し出るようにしています。

wordpressでは記事内にjavascriptを埋め込むのがむずかしいので、Googleサイトを利用しています。

Googleサイトでウェブの埋め込みにjavascriptを埋め込んでいますが、

<div><script type="text/javascript">

let score = 0;
let min = 0 ;
let max = 10 ;
let a = Math.floor( Math.random() * (max + 1 - min) ) + min ;
let b = Math.floor( Math.random() * (max + 1 - min) ) + min ;
let a_str = String(a);
let b_str = String(b);

for (let i = 0; i < 3; i++ ){
document.write("もんだい".fontsize(7))
document.write( b_str.fontsize(7) + "+".fontsize(7) + a_str.fontsize(7) + "=".fontsize(7));

<input type="text" id="id01"> <input type="button" value="計算" onclick="calc();">

function calc(){
let answer = document.getElementById('id01').value;

if (answer = a + b ){
document.write("せいかい".fontsize(7))
}else{
document.write("まちがい".fontsize(7))
}
}
}

</script></div>

としていますが、問題が先に繰り返される。
<input type="text" id="id01">
<input type="button" value="計算" onclick="calc();">
が認識されないという問題を抱えています。

これらを解決して、問題が出る→答える→判定される→また新しい問題がでる、というループを作ることはできませんでしょうか?

Answer 1

ユーザーインタフェースをどうするかもう少し練ったほうがよいでしょう

Comments

[yambejp]

<script>
let min = 0 ;
let max = 10 ;
window.addEventListener('DOMContentLoaded', ()=>{
const v=document.querySelector('#view');
let txt,a,b,a_str,b_str;
for (let i = 1; i <= 3; i++ ){
txt="";
a = Math.floor( Math.random() * (max + 1 - min) ) + min ;
b = Math.floor( Math.random() * (max + 1 - min) ) + min ;
a_str = a.toString();
b_str = b.toString();
txt=`<div id="q${i}">もんだい${a_str}+${b_str}=</div>
<input type="" id="a${i}"><br>
<input type="button" value="計算" onclick="calc(${a_str},${b_str},'a${i}');">`;
v.insertAdjacentHTML('beforeend',txt);
}
});

const calc=(a,b,targetId)=>{
let ret="まちがい"
if(document.querySelector(`#${targetId}`).value==(a+b).toString()){
ret="せいかい";
}
alert(ret);
}
</script>
<div id="view"></div>

Answer 2

まずおっくうでもHTMLの書き方とJavaScriptの書き方の基礎を入門サイトでもなんでも良いので少しだけでも勉強したほうがいいと思います。
Javascriptのコードの中にHTMLがそのまま突っ込まれることはありません。

コードの例

Comments

[forsd]

そのようですね。コード例ありがとうございます。

これを元に問題を間違えた時に正しい答えが入力されるまで同じ問題が出続けるという方向で手を加えてみたのですが、なかなかうまくいきません。

解答ミスした場合も同じ問題をループさせることってできるのでしょうか?

[aoies]

show()関数で次の問題の表示を行なっています。
calc関数内で解答後setTimeout()関数を用いることで一定時間後にshow関数を呼び出させています。
グローバル変数か引数として問題に正解したか（次に問題を変えるか）のフラグをshow関数に与えるようにして、
問題を変更する場合だけaとbを計算し直すようにすれば良いと思います。
ちなみにsetTimeoutを用いて引数xを与える時はSetTimeout(show,3000,x)みたいに書けばよいです。
https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout