算数の文章問題 さんすうのぶんしょうもんだい

小学生向けの問題だよ。買い物の代金やおつりを計算しよう!

view source

JavaScript

document.title = '算数の文章問題 さんすうのぶんしょうもんだい';
//小学生向けの問題だよ。買い物の代金やおつりを計算しよう!


let clearCount = 0;

function generateFruitProblem() {
  const title = '連立方程式 買い物編';
  const applePrice = Math.floor(Math.random() * 5)*10 + 50;
  const orangePrice = Math.floor(Math.random() * 10)*10 + 110;

  const apples = Math.floor(Math.random() * 17) + 3;
  const oranges = Math.floor(Math.random() * 17) + 3;

  const totalFruits = apples + oranges;

  const totalPrice = apples * applePrice + oranges * orangePrice;

  const problem = `${applePrice}円のりんご🍎と${orangePrice}円のみかん🍊を合わせて${totalFruits}個買い、合計金額は${totalPrice}円でした。りんごは何個買ったでしょう?`;
  const solution = `りんご ${apples}個、みかん ${oranges}個`;
  const correct = apples;

  return { title, problem, solution, correct };
}

function generateMultiplicationProblem() {
  const title = 'かけ算の文章問題';
  const unitPrice = Math.floor(Math.random() * 41) + 50; // 50〜90円の間
  const quantity = Math.floor(Math.random() * 5) + 2;     // 2〜6こ
  const total = unitPrice * quantity;

  const problem = `${unitPrice}円のりんご🍎を${quantity}こ買います。代金はいくらになりますか?`;
  const solution = `${total}円`;

  const correct = total;

  return { title, problem, solution, correct };
}

function generateTotalPriceProblem() {
  const title = '合計金額の文章問題';

  const burgerPrice = Math.floor(Math.random() * 31) * 10 + 310; // 310〜(10円刻み)
  const burgerCount = Math.floor(Math.random() * 3) + 2; // 2〜4個

  const friesPrice = Math.floor(Math.random() * 21) * 10 + 110; // 110〜
  const friesCount = Math.floor(Math.random() * 4) + 2; // 2〜5個

  const total = burgerPrice * burgerCount + friesPrice * friesCount;

  const problem = `${burgerPrice}円のハンバーガー🍔を${burgerCount}つと、${friesPrice}円のポテト🍟を${friesCount}つ買いました。代金はいくらになりますか?`;
  const solution = `${total}円`;

  const correct = total;

  return { title, problem, solution, correct };
}

function generateChangeProblem() {
  const title = 'おつりの文章問題';

  // 商品価格と数量を決定
  const itemPrice = Math.floor(Math.random() * 41) * 10 + 30; // 30〜430円(10円単位)
  const quantity = Math.floor(Math.random() * 4) + 2;         // 2〜5個
  const totalCost = itemPrice * quantity;

  // 支払い金額候補(1000円単位)を生成(totalCost 以上、かつ totalCost + 1000 以下)
  const minPayment = Math.ceil(totalCost / 1000) * 1000;

  const change = minPayment - totalCost;

  const problem = `${itemPrice}円のチョコを${quantity}つ買って、${minPayment}円払いました。おつりはいくらですか?`;
  const solution = `${change}円`;

  const correct = change;

  return { title, problem, solution, correct };
}




function generateSpeedProblem() {
  const title = '道のり・時間・速さの問題';
  const speedA = Math.floor(Math.random() * 3) + 4; // Aの速さ: 4〜6 km/h
  const diff = Math.floor(Math.random() * 3) + 2;   // 相対速度: 2〜4 km/h
  const speedB = speedA + diff;                    // Bの速さ
  const catchTime = Math.floor(Math.random() * 3) + 1; // 追いつく時間: 1〜3時間
  const distance = diff * catchTime;               // 先に出たAの進んだ距離
  const delayMinutes = distance / speedA * 60;     // Aが距離d進むのにかかる時間を分に変換

  const problem = `Aさん🐢は時速${speedA}kmで先に出発し、${delayMinutes}分後にBさん🐰が時速${speedB}kmで同じ道を追いかけました。BさんがAさんに追いつくのは出発してから何時間後ですか?`;
  const solution = `${catchTime}時間後`;

  const correct = catchTime;

  return { title, problem, solution, correct };
}

function generateSubtractionProblem() {
  const title = 'ひき算の文章問題';
  const totalCandies = Math.floor(Math.random() * 6) + 5; // 5〜10こ
  const eatenCandies = Math.floor(Math.random() * (totalCandies - 1)) + 1; // 1〜(total -1)
  const remaining = totalCandies - eatenCandies;

  const problem = `あめ🍬が${totalCandies}こあります。${eatenCandies}こ たべました。あめは、なんこ のこって いますか?`;
  const solution = `${remaining}こ`;

  const correct = remaining;

  return { title, problem, solution, correct };
}

function generateDivisionProblem() {
  const title = '割り算の問題';
  const numPeople = Math.floor(Math.random() * 4) + 2;      // 2~5人に配る
  const groupSize = Math.floor(Math.random() * (numPeople - 1)) + 3; // 1〜(人数-1)人分
  const totalCandies = numPeople * groupSize;

  const eachShare = Math.floor(totalCandies / numPeople);

  const problem = `あめ🍬が${totalCandies}こあります。${numPeople}人に同じ数ずつ配ると、1人分は何こになりますか?`;
  const solution = `${groupSize}こ `;

  const correct = groupSize;

  return { title, problem, solution, correct };
}


function generateRandomProblem() {
  const choice = Math.floor(Math.random() * 7);
  if (choice === 0) return generateFruitProblem();
  if (choice === 1) return generateSpeedProblem();
  if (choice === 2) return generateDivisionProblem();
  if (choice === 3) return generateMultiplicationProblem();
  if (choice === 4) return generateSubtractionProblem();
  if (choice === 5) return generateTotalPriceProblem();
  return generateChangeProblem();
}



function generateWrongAnswers(answer) {
  const rawOffsets = [-2, -1, 1, 2];

  let multiplier = 1;

  if (answer % 10 === 0) {
    multiplier = 10;
  }

  if (answer >= 500 && Math.random() < 0.5) {
    multiplier = 100;
  }

  // 誤答候補生成
  const candidates = rawOffsets
    .map(offset => answer + offset * multiplier)
    .filter(val => val > 0 && val !== answer);

  const uniqueSet = new Set(candidates);

  // 補完処理(不足時に +3倍を追加)
  if (uniqueSet.size < 3) {
    const extra = answer + 3 * multiplier;
    if (extra !== answer) {
      uniqueSet.add(extra);
    }
  }

  // シャッフルして3つに絞る
  const shuffled = [...uniqueSet].sort(() => 0.5 - Math.random());
  return shuffled.slice(0, 3);
}




function clearDemoContent() {
  while (demo.firstChild) {
    demo.removeChild(demo.firstChild);
  }
}

function loadQuiz() {
  const { title, problem, solution, correct } = generateRandomProblem();

  // 誤答の生成
  const wrongs = generateWrongAnswers(correct);

  // 選択肢オブジェクト配列を作成
  const choices = [
    { text: correct, isCorrect: true },
    ...wrongs.map(n => ({ text: n, isCorrect: false }))
  ];

  // 数値順にソート(任意)
  choices.sort((a, b) => a.text - b.text);

  // displayQuiz に渡すオブジェクト
  const quizObj = {
    h1: document.title,
    question: problem,
    choices: choices,
    correct: correct,
    solution: solution,
  };

  displayQuiz(quizObj);
}
loadQuiz();

CSS

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/game/quiz-math/

ABOUT

hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

仕様変更、API廃止等、実験途中で動かないページもあります。