mirror of
https://github.com/DeaDvey/mathgenerator.git
synced 2025-11-28 14:35:23 +01:00
76 lines
2.6 KiB
HTML
76 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<script type="text/javascript" src="data.js"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" href="main.css">
|
|
</head>
|
|
<body>
|
|
<h1>Mathgenerator</h1>
|
|
<a href="https://github.com/lukew3/mathgenerator">Github</a>
|
|
<div id="pipBox" class="customBox">pip install mathgenerator</div>
|
|
<p>mathgenerator is a python package that enables users to easily generate a variety of math problems, with customizable settings.</p>
|
|
<hr></hr>
|
|
<h2>Demo</h2>
|
|
<div id="generatorBox" class="customBox">
|
|
<p id="agTitle" >Addition</p>
|
|
<div class="agItem">
|
|
<p class="agLabel">function name:</p>
|
|
<p id="agFunctionName">addition</p>
|
|
</div>
|
|
<div class="agItem">
|
|
<p class="agLabel">subject:</p>
|
|
<p id="agSubject">basic_math</p>
|
|
</div>
|
|
<div class="agItem">
|
|
<p class="agLabel">kwargs:</p>
|
|
<p id="agKwargs">maxSum=99, maxAddend=50</p>
|
|
</div>
|
|
<div class="agItem">
|
|
<p class="agLabel">id:</p>
|
|
<p id="agId">0</p>
|
|
</div class="agItem">
|
|
<div id="agSample">
|
|
<div>
|
|
<p class="agLabel">Problem:</p>
|
|
<p id="agProblem">2+2=</p>
|
|
</div>
|
|
<div>
|
|
<p class="agLabel">Solution:</p>
|
|
<p id="agSolution">4</p>
|
|
</div>
|
|
</div>
|
|
<button id="newProblemButton" onClick="generateSample()">Generate</button>
|
|
</div>
|
|
<div id="generatorList" class="customBox">
|
|
<h3>Available Generators</h3>
|
|
<p>Click a generator to show a sample problem and more info</p>
|
|
</div>
|
|
<script>
|
|
for (let i=0; i<data.length-1; i++) {
|
|
var div = document.createElement("DIV");
|
|
div.className = "generatorListItem"
|
|
div.innerHTML = "<p class='genListItem' onClick='setAg(" + data[i].id + ")'>" + data[i].name + "</p>";
|
|
document.getElementById("generatorList").appendChild(div);
|
|
}
|
|
function setAg(id) {
|
|
let gen = data[id];
|
|
document.getElementById("agTitle").innerHTML = gen.name;
|
|
document.getElementById("agFunctionName").innerHTML = gen.function_name;
|
|
document.getElementById("agKwargs").innerHTML = gen.kwargs;
|
|
document.getElementById("agId").innerHTML = gen.id;
|
|
generateSample(id);
|
|
}
|
|
function generateSample(agId=-1) {
|
|
if (agId==-1) agId = document.getElementById("agId").innerHTML;
|
|
let sampleId = Math.floor((Math.random() * 10) + 1) - 1;
|
|
let set = data[agId].samples[sampleId];
|
|
document.getElementById("agProblem").innerHTML = set.problem;
|
|
document.getElementById("agSolution").innerHTML = set.solution;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|