Sindbad~EG File Manager
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select a Problem Type</title>
<style>
.symbol-container {
display: grid;
gap: 10px; /* vertical space between the items */
}
body {
background-color: rgb(220,220,255); /* Replace #e0e0e0 with your desired color */
}
h1 {
font-family: Arial, sans-serif;
text-align: center;
font-style: italic;
}
svg text {
font-size: 14px;
fill: black;
text-align: center;
}
.symbol-item {
width: 150px;
height: 170px;
border: 1px solid black;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: lightblue;
}
.symbol-item img {
width: 120px;
height: 120px;
margin-bottom: 5px;
object-fit: contain; /* Ensures that alt-text shows if the image is missing */
display: block;
}
/* Grid settings for different screen sizes */
@media (min-width: 1201px) {
.symbol-container {
grid-template-columns: repeat(6, 1fr); /* 2 rows of 6 */
}
}
@media (max-width: 1200px) and (min-width: 901px) {
.symbol-container {
grid-template-columns: repeat(4, 1fr); /* 3 rows of 4 */
}
}
@media (max-width: 900px) and (min-width: 601px) {
.symbol-container {
grid-template-columns: repeat(3, 1fr); /* 4 rows of 3 */
}
}
@media (max-width: 600px) and (min-width: 401px) {
.symbol-container {
grid-template-columns: repeat(2, 1fr); /* 6 rows of 2 */
}
}
@media (max-width: 400px) {
.symbol-container {
grid-template-columns: repeat(1, 1fr); /* 12 rows of 1 */
}
}
#selector1 {
font-family: "Times New Roman", serif;
font-size: 10pt;
}
#selector2 {
font-family: "Times New Roman", serif;
font-size: 10pt;
}
.selector {
width: 160px; /* Adjust the width as needed */
box-sizing: border-box;
}
. selector-item.selected {
border: 1px solid black;
}
</style>
<script src="ToolbarWidth.js"></script>
<script>
// This script provides translations into all supported languages of the
// text needed for this page, so we can change languages without the Engine.
// The selected language then can be passed by GET to subsequent pages.
const languageData = {
english: {
select: "Select a Problem Type",
simplify: "Simplify",
factor: "Factor",
inequality: "Inequality",
solveEquation: "Solve One Equation",
solveLinearEquations: "Linear Equations",
verifyIdentity: "Verify Identity",
limits: "Evaluate a Limit",
derivatives: "Evaluate a Derivative",
integrals: "Evaluate an Integral",
improperintegrals: "Improper Integrals",
infiniteseries: "Infinite Series",
differentiatefromdefn: "Differentiate",
differentiatefromdefn2: "from Definition",
implicitdiff: "Implicit Differentiation",
maxmin: "Maxima and Minima",
relatedrates: "Related Rates",
testconvergence: "Test Convergence",
complex: "Complex Numbers",
powerseries: "Power Series",
},
german: {
select: "Wählen Sie einen Problemtyp aus",
simplify: "Vereinfachen",
factor: "Faktorisieren",
inequality: "Ungleichung",
solveEquation: "Eine Gleichung lösen",
solveLinearEquations: "Lineare Gleichungen",
verifyIdentity: "Identität überprüfen",
limits: "Grenzwert berechnen",
derivatives: "Ableitung berechnen",
integrals: "Integral berechnen",
improperintegrals: "Unzulässige Integrale",
infiniteseries: "Unendliche Reihen",
differentiatefromdefn: "Aus Definition",
differentiatefromdefn2: "differenzieren",
implicitdiff: "Implizite Differentiation",
maxmin: "Maxima und Minima",
relatedrates: "Verwandte Änderungsraten",
testconvergence: "Konvergenz testen",
complex: "Komplexe Zahlen",
powerseries: "Potenzreihen",
},
french: {
select: "Sélectionnez un type de problème",
simplify: "Simplifier",
factor: "Factoriser",
inequality: "Inégalité",
solveEquation: "Résoudre une équation",
solveLinearEquations: "Équations linéaires",
verifyIdentity: "Vérifier l'identité",
limits: "Évaluer une limite",
derivatives: "Évaluer une dérivée",
integrals: "Évaluer une intégrale",
improperintegrals: "Intégrales impropres",
infiniteseries: "Séries infinies",
differentiatefromdefn: "Dériver de la définition",
implicitdiff: "Différentiation implicite",
maxmin: "Maximum et minimum",
relatedrates: "Taux liés",
testconvergence: "Tester la convergence",
complex: "Nombres complexes",
powerseries: "Séries de puissances",
},
spanish: {
select: "Seleccionar un tipo de problema",
simplify: "Simplificar",
factor: "Factorizar",
inequality: "Desigualdad",
solveEquation: "Resolver una ecuación",
solveLinearEquations: "Ecuaciones lineales",
verifyIdentity: "Verificar identidad",
limits: "Evaluar un límite",
derivatives: "Evaluar una derivada",
integrals: "Evaluar una integral",
improperintegrals: "Integrales impropias",
infiniteseries: "Series infinitas",
differentiatefromdefn: "Diferenciar",
differentiatefromdefn2: "desde la definición",
implicitdiff: "Diferenciación implícita",
maxmin: "Máximos y mínimos",
relatedrates: "Razones relacionadas",
testconvergence: "Probar convergencia",
complex: "Números complejos",
powerseries: "Series de potencias",
},
italian: {
select: "Seleziona un tipo di problema",
simplify: "Semplificare",
factor: "Fattorizzare",
inequality: "Disequazione",
solveEquation: "Risolvere un'equazione",
solveLinearEquations: "Equazioni lineari",
verifyIdentity: "Verificare l'identità",
limits: "Valutare un limite",
derivatives: "Valutare una derivata",
integrals: "Valutare un integrale",
improperintegrals: "Integrali impropri",
infiniteseries: "Serie infinite",
differentiatefromdefn: "Derivare dalla definizione",
implicitdiff: "Derivazione implicita",
maxmin: "Massimi e minimi",
relatedrates: "Tassi correlati",
testconvergence: "Verificare la convergenza",
complex: "Numeri complessi",
powerseries: "Serie di potenze",
},
dutch: {
select: "Selecteer een probleemtype",
simplify: "Vereenvoudigen",
factor: "Factoriseren",
inequality: "ongelijkheid",
solveEquation: "Los een vergelijking op",
solveLinearEquations: "Lineaire vergelijkingen",
verifyIdentity: "Identiteit verifiëren",
limits: "Limieten evalueren",
derivatives: "Een afgeleide berekenen",
integrals: "Een integraal berekenen",
improperintegrals: "Onjuiste integralen",
infiniteseries: "Oneindige reeksen",
differentiatefromdefn: "Differentieer vanuit de definitie",
implicitdiff: "Impliciete differentiatie",
maxmin: "Maxima en minima",
relatedrates: "Gerelateerde snelheden",
testconvergence: "Convergentie testen",
complex: "Complexe getallen",
powerseries: "Machtsreeksen",
},
chinese: {
select: "选择问题类型",
simplify: "化简",
factor: "因式分解",
inequality: "不等式",
solveEquation: "解一个方程",
solveLinearEquations: "解线性方程",
verifyIdentity: "验证恒等式",
limits: "求极限",
derivatives: "求导数",
integrals: "求积分",
improperintegrals: "广义积分",
infiniteseries: "无穷级数",
differentiatefromdefn: "从定义求导",
implicitdiff: "隐式求导",
maxmin: "最大值和最小值",
relatedrates: "相关变化率",
testconvergence: "测试收敛性",
complex: "复数",
powerseries: "幂级数",
}
};
function setLanguage(lang) {
console.log("Entering setLanguage with " , lang);
const selectElement = document.getElementById('select');
const simplifyElement = document.getElementById('simplify').querySelector("text");
const factorElement = document.getElementById('factor').querySelector("text");
const solveEquationElement = document.getElementById('solveEquation').querySelector("text");
const solveLinearEquationsElement = document.getElementById('solveLinearEquations').querySelector("text");
const verifyIdentityElement = document.getElementById('verifyIdentity').querySelector("text");
const limitsElement = document.getElementById('limits').querySelector("text");
const derivativesElement = document.getElementById('derivatives').querySelector("text");
const integralsElement = document.getElementById('integrals').querySelector("text");
const improperintegralsElement = document.getElementById('improperintegrals').querySelector("text");
const infiniteseriesElement = document.getElementById('infiniteseries').querySelector("text");
const inequalityElement = document.getElementById('inequality').querySelector("text");
const differentiatefromdefnElement = document.getElementById('differentiatefromdefn').querySelector("text");
if(lang=="german" || lang=="spanish" || lang=="english")
differentiatefromdefnElement2 = document.getElementById('differentiatefromdefn2').querySelector("text");
const implicitdiffElement = document.getElementById('implicitdiff').querySelector("text");
const maxminElement = document.getElementById('maxmin').querySelector("text");
const relatedratesElement = document.getElementById('relatedrates').querySelector("text");
const powerseriesElement = document.getElementById('powerseries').querySelector("text");
selectElement.textContent = languageData[lang].select;
simplifyElement.textContent = languageData[lang].simplify;
factorElement.textContent = languageData[lang].factor;
solveEquationElement.textContent = languageData[lang].solveEquation;
solveLinearEquationsElement.textContent = languageData[lang].solveLinearEquations;
verifyIdentityElement.textContent = languageData[lang].verifyIdentity;
limitsElement.textContent = languageData[lang].limits;
derivativesElement.textContent = languageData[lang].derivatives;
integralsElement.textContent = languageData[lang].integrals;
improperintegralsElement.textContent = languageData[lang].improperintegrals;
infiniteseriesElement.textContent = languageData[lang].infiniteseries;
inequalityElement.textContent = languageData[lang].inequality;
differentiatefromdefnElement.textContent = languageData[lang].differentiatefromdefn;
if(lang=="german" || lang=="spanish" || lang=="english")
differentiatefromdefnElement2.textContent = languageData[lang].differentiatefromdefn2;
implicitdiffElement.textContent = languageData[lang].implicitdiff;
maxminElement.textContent = languageData[lang].maxmin;
relatedratesElement.textContent = languageData[lang].relatedrates;
powerseriesElement.textContent = languageData[lang].powerseries;
// Save the selected language in local storage for next time
localStorage.setItem('selectedLanguage', lang);
// pass the language as a GET parameter to all the linked pages
// Get all the anchor elements on the page
var links = document.querySelectorAll('a');
// Loop through each link
links.forEach(function(link) {
// Get the current href of the link
var href = link.getAttribute('href');
// Check if the href already has a query string
if (href.includes('?')) {
// If yes, just append the language parameter
href += '&language=' + lang;
}
else {
// If no, add the language parameter as the first query string
href += '?language=' + lang;
}
href += '&windowWidth=' + windowWidth;
href += '&windowHeight=' + windowHeight;
href += '&toolbarWidth=' + toolbarWidth;
// Set the modified href back to the link
link.setAttribute('href', href);
console.log(href);
});
}
</script>
</head>
<body>
<?php
$language = $_GET['language'];
?>
<h1 id="select" >Select a Problem Type</h1>
<div style="display:none;">
<?php include 'ButtonDefinitions.svg'; ?>
</div>
<div class="symbol-container">
<a href="EnterSimplify.php" id="SimplifyLink" class="symbol-item">
<div style="margin-top: 3px;"></div>
<img src="images/Simplify.png" alt="Simplify">
<div style="margin-top: 3px;"></div>
<svg id="simplify" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Simplify</text>
</svg>
</a>
<a href="EnterFactor.php" id="FactorLink" class="symbol-item">
<div style="margin-top: 3px;"></div>
<img src="images/Factor.png" alt="Factor">
<div style="margin-top: 3px;"></div>
<svg id="factor" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Factor</text>
</svg>
</a>
<a href="EnterSolveEquation.php" id="solveEquationLink" class="symbol-item">
<div style="margin-top: 3px;"></div>
<img src="images/solveEquation.png" alt="Solve One Equation">
<div style="margin-top: 3px;"></div>
<svg id="solveEquation" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Solve One Equation</text>
</svg>
</a>
<a href="EnterInequality.php" id="inequalityLink" class="symbol-item">
<div style="margin-top: 3px;"></div>
<img src="images/Inequalities.png" alt="Inequality">
<div style="margin-top: 3px;"></div>
<svg id="inequality" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Inequality</text>
</svg>
</a>
<a href="EnterLinearEquations.php" id="dynamicLink2" class="symbol-item">
<div style="margin-top: 3px;"></div>
<img src="images/LinearEquationsSubst.png" alt="Solve Linear Equations">
<div style="margin-top: 3px;"></div>
<svg id="solveLinearEquations" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Linear Equations</text>
</svg>
</a>
<a href="EnterVerifyIdentity.php" id="verifyIdentityLink" class="symbol-item">
<div style="margin-top: 3px;"></div>
<img src="images/VerifyIdentity.png" alt="Verify Identity">
<svg id="verifyIdentity" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Verify Identity</text>
</svg>
</a>
<a href="EnterLimit.php" id="EnterLimitLink" class="symbol-item">
<div style="margin-top: 3px;"></div>
<img src="images/EnterLimit.png" alt="Evaluate a Limit">
<div style="margin-top: 3px;"></div>
<svg id="limits" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Evaluate a Limit</text>
</svg>
</a>
<a href="EnterDerivative.php" id="EnterDerivativeLink" class="symbol-item">
<img src="images/EnterDerivative.png" alt="Evaluate a Derivative">
<svg id="derivatives" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Evaluate a Derivative</text>
</svg>
</a>
<a href="EnterDifFromDefn.php" id="DifferentiateFromDefnLink" class="symbol-item">
<img src="images/DiffFromDefn.png" alt="Diff from Defn">
<svg id="differentiatefromdefn" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Definition of Derivative</text>
</svg>
<?php if ($language=="german" || $language=="spanish" || $language == "english"): ?>
<svg id="differentiatefromdefn2" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Definition of Derivative2</text>
</svg>
<?php endif; ?>
</a>
<a href="EnterIntegral.php" id="EnterIntegralLink" class="symbol-item">
<img src="images/EnterIntegral.png" alt="Evaluate an Integral">
<svg id="integrals" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Evaluate an Integral</text>
</svg>
</a>
<a href="EnterImproperIntegral.php" id="EnterImproperIntegralLink" class="symbol-item">
<img src="images/EnterImproperIntegral.png" alt="Improper Integral">
<svg id="improperintegrals" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Improper Integrals</text>
</svg>
</a>
<a href="EnterImplicitDiff.php" id="EnterImplicitDiffLink" class="symbol-item">
<img src="images/EnterImplicitDiff.png" alt="Implicit Diff">
<svg id="implicitdiff" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Implicit Differentiation</text>
</svg>
</a>
<a href="EnterMaxMin.php" id="EnterMaxMinLink" class="symbol-item">
<img src="images/EnterMaxMin.png" alt="Max and Min">
<svg id="maxmin" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Maxima and Minima</text>
</svg>
</a>
<a href="EnterRelatedRates.php" id="EnterRelatedRatesLink" class="symbol-item">
<img src="images/EnterRelatedRates.png" alt="Related Rates">
<svg id="relatedrates" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Related Rates</text>
</svg>
</a>
<a href="EnterInfiniteSeries.php" id="EnterInfiniteSeriesLink" class="symbol-item">
<img src="images/EnterInfiniteSeries.png" alt="Infinite Series">
<svg id="infiniteseries" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Infinite Series</text>
</svg>
</a>
<a href="EnterPowerSeries.php" id="EnterPowerSeriesLink" class="symbol-item">
<img src="images/EnterPowerSeries.png" alt="Power Series">
<svg id="powerseries" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Power Series</text>
</svg>
</a>
</div>
<script>
function setURL(selectedValue) {
console.log("in setURL");
setLinks();
var link = document.getElementById("dynamicLink");
link.href = selectedValue + '?language=' + <?php echo("\"$language\"");?> + '&windowWidth=' + windowWidth + '&windowHeight=' + windowHeight;
console.log(link);
}
function setURL2(selectedValue) {
var link = document.getElementById("dynamicLink2");
console.log("in setURL2");
setLinks();
link.href = selectedValue + '&language=' + <?php echo("\"$language\"");?> + '&windowWidth=' + windowWidth + '&windowHeight=' + windowHeight;
// "&language because selectedValue already has "?topic=xx"
console.log(link);
}
function setURL3(selectedValue) {
setLinks();
var link = document.getElementById("dynamicLink3");
console.log(link);
link.href = selectedValue + '?language=' + <?php echo("\"$language\"");?> + '&windowWidth=' + windowWidth + '&windowHeight=' + windowHeight;
console.log(link);
}
</script>
<script src="ToolbarWidth.js"></script>
<script>
// measure the toolbarWidth, since it will be passed by GET until we get to GraphDocProc
// user goes from this page to SymbolDoc.php, where toolbarwidth is not needed, but from
// there, the user can click the Graph Button, and go to GraphDoc.php, which DOES definitely
// need toolbarwidth, and it can't really get it unless it's been passed along from somewhere
// where Javascript has access to the Toolbar. Since Toolbar.php is not included in
// EnterSolveLinearEquations.php or similar Enter* pages, it has to be passed along all
// the way from this page.
let toolbarWidth = getToolbarWidth();
let windowWidth = document.body.clientWidth;
let windowHeight = window.innerHeight; // technically this is the "viewport height"
console.log("windowWidth=",windowWidth);
document.addEventListener("DOMContentLoaded", function() {
<?php if(isset($language))
echo ("const savedLanguage = \"$language\";");
else
echo ("const savedLanguage = localStorage.getItem(\'selectedLanguage\');");
?>
console.log("language = ", savedLanguage);
console.log("got here!");
if (savedLanguage) {
// Update the page content based on the saved language
setLanguage(savedLanguage);
}
setLinks();
});
function setLinks() {
const svgItems = document.querySelectorAll('.selector-item');
svgItems.forEach(item => {
item.addEventListener('click', function () {
// Remove 'selected' class from all items
svgItems.forEach(i => i.classList.remove('selected'));
// Add 'selected' class to the clicked item
this.classList.add('selected');
console.log(this.id + ' selected');
});
});
}
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists