deadvey/mathgenerator
1
0
Fork 0
mirror of https://github.com/DeaDvey/mathgenerator.git synced 2025-11-28 14:35:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

added web-demo

Browse Source
This commit is contained in:
lukew3
2021-10-08 16:17:11 -04:00
parent 43cee8cd0a
commit 016e4c7aa5
3 changed files with 6163 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
web-demo/mathgenerator.html Normal file
View File

@@ -0,0 +1,75 @@
<!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>