mirror of
https://github.com/DeaDvey/mathgenerator.git
synced 2025-11-28 14:35:23 +01:00
added web-demo
This commit is contained in:
lukew3
5978
web-demo/data.js
Normal file
5978
web-demo/data.js
Normal file
File diff suppressed because it is too large
Load Diff
110
web-demo/main.css
Normal file
110
web-demo/main.css
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
* {
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
html, body {
|
||||||
|
background-color: #2C2C2C;
|
||||||
|
color: #E3E3E3;
|
||||||
|
width: 95%;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #E3E3E3;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #868686;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.customBox {
|
||||||
|
background-color: #38393A;
|
||||||
|
padding: 10px;
|
||||||
|
margin: auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
#pipBox {
|
||||||
|
width: 300px;
|
||||||
|
margin: 15px auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
#generatorBox {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 500px;
|
||||||
|
padding: 30px;
|
||||||
|
margin: auto;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
#generatorBox p {
|
||||||
|
text-align: left;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#generatorBox .agLabel {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.agItem {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#generatorList {
|
||||||
|
width: 90%;
|
||||||
|
max-width: 500px;
|
||||||
|
margin: auto;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
#generatorList * {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
#generatorList h3 {
|
||||||
|
margin: 0 0 10px 3px;
|
||||||
|
}
|
||||||
|
#agTitle {
|
||||||
|
font-size: 20pt;
|
||||||
|
}
|
||||||
|
.generatorListItem {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 3px;
|
||||||
|
}
|
||||||
|
.itemId {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
#agSample {
|
||||||
|
display: block;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
#agProblem, #agSolution {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
.genListItem {
|
||||||
|
margin-left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.genListItem:hover {
|
||||||
|
color: #b5b5b5;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #AB3737;
|
||||||
|
border: none;
|
||||||
|
color: #F2DEDE;
|
||||||
|
padding: 5px 40px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
button:active {
|
||||||
|
color: #A89C9C;
|
||||||
|
background-color: #8A2323;
|
||||||
|
}
|
||||||
75
web-demo/mathgenerator.html
Normal file
75
web-demo/mathgenerator.html
Normal 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>
|
||||||
Reference in New Issue
Block a user