Sindbad~EG File Manager
<?php
$problemtype = $LINEAR_EQUATIONS = 12; // from probtype.h
$title = "Linear Equations";
$topic = 67; // the default topic, see the selector below. Can't be zero or arrowButton will crash
?>
<!DOCTYPE html>
<?php
$serverAddress = 'localhost'; // Adjust the server address
$serverPort = 12349; // Adjust the server port
$timeout = 300; // Connection timeout in seconds, long enough for debugging.
$startupDelay = 5; // Delay for server startup in seconds, if server is not already running
if (!(isset($_SERVER['HTTPS']) && ($_SERVER['HTTPS'] == 'on' ||
$_SERVER['HTTPS'] == 1) ||
isset($_SERVER['HTTP_X_FORWARDED_PROTO']) &&
$_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https'))
{
$redirect = 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
header('HTTP/1.1 301 Moved Permanently');
header('Location: ' . $redirect);
exit();
}
if ($_SERVER['SERVER_NAME'] == 'localhost') {
$serverAddress = 'localhost';
} else {
$serverAddress = 'mathxpert.org';
}
session_start();
$sessionId = session_id(); // guaranteed not to contain a pipe character
ini_set('display_errors', 1);
error_reporting(E_ALL);
require("SendMessage.php");
$nequations = isset($_POST['nequations']) ? (int)$_POST['nequations'] : 2;
$Formulas = [];
for ($i = 1; $i <= $nequations; $i++) {
$Formulas[$i] = isset($_POST["linearEquation$i"]) ? $_POST["linearEquation$i"] : '';
}
?>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">
<style>
/* Set a global font-family rule for all text elements. Only Times New Roman actually works well. */
text {
# font-family: 'Times New Roman'; /*, 'Cambria Math', 'STIX Two Math', 'Latin Modern Math', 'TeX Gyre Termes Math'; */
}
svg text {
font-family: 'Times New Roman';
font-size: 16px;
fill: black;
text-align: center;
}
/* Ensure Arial for button and tooltip text */
.svg-button text, .svg-button svg text, .tooltip svg text{
font-family: 'Arial';
}
/* Stacking form elements vertically */
form {
display: flex;
flex-direction: column;
align-items: flex-start; /* Align items to the start of the form */
gap: 10px; /* Add some space between each element */
}
#formulaPrompt {
margin-bottom: 5px;
}
input[type="text"] {
width: 300px; /* Set the width of the text input */
}
#EntryFields {
display: flex;
align-items: left;
flex-direction: column;
}
.function-entry {
display: flex;
align-items: center;
}
#expressionID {
flex: 1; /* Allow input field to take up remaining space */
}
#arrowButton {
background: none;
border: none;
padding: 0;
margin-left: 10px; /* Add some spacing between the input and button */
cursor: pointer;
}
#arrowButton img {
display: block;
}
/* Tooltips */
.tooltip {
position: absolute;
background-color: lightyellow;
border: 1px solid black;
color: black;
padding: 5px;
border-radius: 3px;
white-space: nowrap;
z-index: 1000;
display: none; /* Hide by default */
font-size: 12px; /* Change the font size */
font-family: Arial, sans-serif;
}
.tooltip::before {
content: '';
position: absolute;
top: -8px; /* Adjust based on the size of the triangle */
left: 0px; /* Adjust based on desired position */
border-width: 0 5px 10px 0px; /* Create a smaller yellow triangle pointing up */
border-style: solid;
border-color: transparent transparent lightyellow transparent; /* Only the bottom part is visible */
}
.hidden {
display: none;
}
</style>
<title><?php echo($title) ?> </title>
<?php
$language = $_GET['language']; // has to come before the client-side validation script that needs it
$windowWidth = $_GET['windowWidth'];
$windowHeight = $_GET['windowHeight'];
$toolbarWidth = $_GET['toolbarWidth']; // this needs to be passed to GraphDoc.php
$graphWidth = $windowWidth - $toolbarWidth;
$showAddFunctionBtn = isset($_POST['showAddFunctionBtn']) ? 'no' : 'yes';
?>
<script>
// JavaScript function to validate the form before submission
// so-called "client-side validation"
function validateForm(event) {
// Get the values of the input fields
const equation1 = document.forms["formulaForm"]["linearEquation1"].value;
const equation2 = document.forms["formulaForm"]["linearEquation2"].value;
// Check if either of the fields is empty
if (equation1 === "" || equation2 === "") {
// Show an alert if either field is empty
alert(translations[<?php echo("\"$language\"");?>].alert1);
// Prevent the form from being submitted
event.preventDefault();
return false;
}
let nequals1 = equation1.split('=').length-1;
let nequals2 = equation2.split('=').length-1;
if(nequals1 == 0 || nequals2 == 0){
alert(translations[<?php echo("\"$language\"");?>].alert2);
// Prevent the form from being submitted
event.preventDefault();
return false;
}
if(nequals1 > 1 || nequals2 > 1 ){
alert(translations[<?php echo("\"$language\"");?>].alert3);
// Prevent the form from being submitted
event.preventDefault();
return false;
}
// Allow the form to be submitted if nothing above rejects it
return true;
}
// Add the validation function to the form's submit event
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("formulaForm").addEventListener("submit", validateForm);
});
</script>
<?php
if (isset($_POST['topicField3'])) // may have been set by ArrowButton.js
$topic = $_POST['topicField3'];
?>
<script>
// global variables, changeable by selector2, passed by POST['complexSelector'] when Display is clicked
var topic = <?php echo($topic); ?>;
var problemtype = <?php echo($problemtype); ?>;
console.log("topic = ", topic);
document.addEventListener('DOMContentLoaded', function () {
// Get the selector element
const complexSelector = document.getElementById('selector2');
if (complexSelector) {
// Set the value of the selector to match the current topic
complexSelector.value = topic;
}
});
</script>
</head>
<body>
<style>
.function-entry {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.function-entry svg {
margin-right: 10px;
}
#EntryFields {
margin-bottom: 0px;
}
/* CSS to style the entry fields with a light green background */
input[type="text"],
input[type="number"],
input[type="email"],
textarea
{
background-color: #ccffcc; /* Light green background */
border: 1px solid #ccc; /* Optional: Border styling */
padding: 5px; /* Padding for better spacing */
border-radius: 4px; /* Rounded corners */
}
select {
background-color: #ccffcc; /* Light green */
}
/* Style for focus state */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
background-color: #b3ffb3; /* Slightly darker green when focused */
outline: none; /* Remove default outline */
border-color: #66cc66; /* Optional: Change border color on focus */
}
#svgContainer, #myForm {
display: block; /* Ensures each is on its line */
width: 100%; /* Adjusts width to the container */
}
#svgContainer {
margin-bottom: 5px;
margin-top: 10px;
background-color: lightblue;
position:relative
/* overflow: hidden; Ensure the container wraps its content */
}
.add-function-container {
display: flex;
align-items: center; /* Align items vertically center */
gap: 10px; /* Add some space between the button and label */
margin-top: 10px; /* Add space above the container */
}
</style>
<script src="TranslateEnterPages.js"></script>
<?php
// Determine the number of equations from the submitted data
$nequations = isset($_POST['nequations']) ? (int)$_POST['nequations'] : 2; // Default to 2 equations
$Formulas = [];
for ($i = 1; $i <= $nequations; $i++) {
$Formulas[$i] = isset($_POST["linearEquation$i"]) ? htmlspecialchars($_POST["linearEquation$i"]) : "";
}
?>
<?php
if ($_SERVER["REQUEST_METHOD"] === "POST")
{ $editflag = 0;
if(isset($_POST["editflagField"])) // after the simulated Display click in presentProblem()
{ $editflag = 0;
echo( "<script>var editflag = false;</script>");
}
if(isset($_POST["problemTextField"])) // direct from the Edit button in GetProblemAsync.php
{ // from the Edit button in GetProblemAsync.php
$problemText = $_POST["problemTextField"];
$editTopic = $_POST["topicField"];
$editflag = 1;
echo( "<script> var problemText = \"$problemText\"; var editTopic = $editTopic; var editflag = true;</script>");
}
}
?>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'] . '?' . $_SERVER['QUERY_STRING']); ?>" method="post" id="formulaForm">
<svg id="enterequations" width="250" x="0" y="30" height="25">
<text x="0" y="20">Linear equations to solve:</text>
</svg>
<div id="EntryFields">
<div class="function-entry">
<input type="text" name="linearEquation1" id="linearEquationID1"
placeholder="Enter equation"
value="<?php echo htmlspecialchars($Formulas[1]); ?>"
autofocus
>
<button
id="arrowButton"
class="svg-button"
type="button"
onClick="handleArrowClick(document.getElementById('linearEquationID1'),problemtype,topic)"
>
<img src="images/drawn_bow_arrow_30px.png" alt="Arrow Icon" width="30" height="30">
</button>
</div>
<?php for ($i = 2; $i <= $nequations; $i++): ?>
<div class="function-entry">
<input type="text" name="linearEquation<?php echo $i; ?>" id="linearEquationID<?php echo $i; ?>"
placeholder="Enter equation"
value="<?php echo htmlspecialchars($Formulas[$i]); ?>"
>
</div>
<?php endfor; ?>
</div>
<!-- Flex container for "+" button and label -->
<div class="add-function-container">
<!-- "+" Button to add more fields -->
<button type="button" id="addEquationBtn" class="svg-button" style="background-color:transparent; border:none;">
<svg width="12" height="12" style="position:relative; overflow:visible;" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect width="18" height="18" fill="rgb(0,0,128)" />
<!-- Text -->
<text x="9" y="13.5" style="fill:white;" font-size="12" font-family="Arial" text-anchor="middle">+</text>
</svg>
</button>
<label for="addEquationBtn" id="addEquationLabel">Add another equation</label>
</div>
<input type="hidden" name="nequations" id="nequations" value="<?php echo $nequations; ?>">
<button type="submit" id="displayButton" class="svg-button" style="background-color:transparent; border:none;">
<svg width="60" height="30" id="display" style="position:relative; overflow:visible;" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect width="60" height="30" fill="rgb(0,0,128)" />
<!-- Text -->
<text x="30" y="20" style="fill:white;" font-size="12" font-family="Arial" text-anchor="middle">Display</text>
</svg>
</button>
<input type="hidden" id="showAddFunctionBtn" name="showAddFunctionBtn" value= 'no' >
<input type="hidden" name="topicField3" value="<?php echo($topic); ?>" id="topicField3">
<input type="hidden" name="editflagField" value="<?php echo($editflag); ?>" id ="editflagField">
</form>
<!-- tooltip-container is used by Tooltips.js to put each tooltip text, one at a time, into it. -->
<div id="tooltip-container" class = "tooltip"></div>
<!-- put all needed tooltips here as <svg> elements.
This pre-document file does not receive Tooltips from the Engine. They must be written here. -->
<svg class="tooltip" id="tooltip-displayButton" width="300" height="30"
style="display:none;
position:absolute;
left: 0; top: 0;
xmlns="http://www.w3.org/2000/svg"
>
<text x = "0" y="16" style="font-size:14px;fill:black;stroke:none;">Display the formulas in mathematical notation </text>
</svg>
<svg class="tooltip" id="tooltip-solveNowButton" width="250" height="30"
style="display:none;
position:absolute;
left: 0; top: 0;
xmlns="http://www.w3.org/2000/svg"
>
<text x = "0" y="16" style="font-size:14px;fill:black;stroke:none;">Draw the graph </text>
</svg>
<svg class="tooltip" id="tooltip-select2" width="600" height="30"
style="display:none;
position:absolute;
left: 0; top: 0;
xmlns="http://www.w3.org/2000/svg"
>
<text x = "0" y="16" style="font-size:14px;fill:black;stroke:none;"> </text>
</svg>
</svg>
<svg class="tooltip" id="tooltip-arrowButton" width="250" height="40"
style="display:none; position:absolute; left: 0; top: 0;"
xmlns="http://www.w3.org/2000/svg"
>
<text x = "0" y="16" style="font-size:14px;fill:black;stroke:none;">Shoots a sample problem into</text>
<text x = "0" y="35" style="font-size:14px;fill:black;stroke:none;">the entry field to the left</text>
</svg>
<?php
$clientSocket = createClientSocket($serverAddress, $serverPort, $timeout);
if ($_SERVER["REQUEST_METHOD"] === "POST" && $editflag == 0)
{
$Formula1 = $_POST['linearEquation1'];
$Formula2 = $_POST['linearEquation2'];
// compute the list of all the entered formulas
$nequations = 2;
if(isset($_POST['linearEquation3']))
{ ++$nequations;
$Formula3 = $_POST['linearEquation3'];
}
if(isset($_POST['linearEquation4']))
{ ++$nequations;
$Formula4 = $_POST['linearEquation4'];
}
if(isset($_POST['linearEquation5']))
{ ++$nequations;
$Formula5 = $_POST['linearEquation5'];
}
if(isset($_POST['linearEquation6']))
{ ++$nequations;
$Formula6 = $_POST['linearEquation6'];
}
switch($nequations)
{ case 2: $Formula = "$Formula1,$Formula2"; break;
case 3: $Formula = "$Formula1,$Formula2,$Formula3"; break;
case 4: $Formula = "$Formula1,$Formula2,$Formula3,$Formula4"; break;
case 5: $Formula = "$Formula1,$Formula2,$Formula3,$Formula4,$Formula5"; break;
case 6: $Formula = "$Formula1,$Formula2,$Formula3,$Formula4,$Formula5,$Formula6"; break;
}
// Now connect to the Engine
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
if ($socket === false)
{
echo "Socket creation failed: " . socket_strerror(socket_last_error()) . "<br>";
}
else
{
socket_set_option($socket, SOL_SOCKET, SO_RCVTIMEO, array("sec" => $timeout, "usec" => 0));
$result = socket_connect($socket, $serverAddress, $serverPort);
if ($result)
{
$param = "\"$Formula\"+$problemtype+$language+$graphWidth+$windowHeight+$topic+$toolbarWidth";
$response = sendMessage($clientSocket,"setupAndCheckSymbol",$param);
if ($response === false)
{
$errcode = socket_last_error($socket);
$message = socket_strerror($errcode);
echo "Socket_read error: $message<br>";
}
else if (str_contains($response, "Error")) // parseError or mathError
{
?>
<div id="svgContainer" >
<?php
// add the dynamically generated SVG, of class "parserError" or "mathError"
echo ($response);
/* More elaborately, we could use Javascript to add $response to the DOM,
then check whether the class is parserError, and if it is, put up
an alert with the message; otherwise echo it as here or just add it to
svgContainer.
*/
?>
</div>
<?php
}
else
{
?>
<div style="display:none;">
<?php include 'ButtonDefinitions.svg'; ?>
</div>
<div id="svgContainer" >
<?php
// add the dynamically generated SVG,
// which comes as an SVG element with id "parsedTerm" of class "termSVG"
echo ($response);
?>
</div>
<form id="myForm" method="post" action="SymbolicDoc.php">
<!-- the action element has no name as we don't need it posted, especially not with name "action", which causes a conflict -->
<input type="hidden" id="formAction" value="">
<label for="selector2" id="selector2Label" style="display:block; margin-top:5px; margin-bottom:5px">You can optionally tell MathXpert how you want to solve the equations:</label>
<select id="selector2" class="selector" style="margin-top:5px; margin-bottom:8px;" onchange="document.getElementById('topicField2').value = this.value;">
<option value="67" class="selector-item" id="rowandcolumn" selected>
Add/subtract equations
</option>
<option value="66" class="selector-item" id="substitution">
Use substitution
</option>
<option value="68" class="selector-item" id="matrices">
Work with matrices
</option>
<option value="69" class="selector-item" id="gaussJordan">
Use Gauss-Jordan
</option>
<option value="70" class="selector-item" id="matrixInverse">
Use matrix inverse
</option>
<option value="71" class="selector-item" id="cramer">
Cramer's rule
</option>
</select>
<br>
<button type="submit" name="solveNow" id="solveNowButton" class="svg-button" style="background-color:transparent; border:none;">
<svg width="130" height="30" style="position:relative;overflow:visible;" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect width="130" height="30" fill="rgb(0,0,128)" />
<!-- Text -->
<text x="65" y="20" style="fill:white;" font-size="12" font-family="Arial" text-anchor="middle" >Do the Math</text>
</svg>
</button>
<input type="hidden" name="widthField3" id="widthField2" value = <?php echo $windowWidth ?> >
<input type="hidden" name="heightField3" id="heightField2" value=<?php echo $windowHeight ?> >
<input type="hidden" name="toolbarwidthField" id="toolbarwidthField" value = <?php echo $toolbarWidth ?> >
<input type="hidden" name="language" id="language" value = <?php echo $language ?> >
<input type="hidden" name="topicField" value="<?php echo($topic); ?>" id="topicField2">
</form>
<?php
}
}
else
{
echo "Failed to connect to the MathXpert Engine: " . socket_strerror(socket_last_error()) . "<br>";
}
}
}
?>
<script src="MoveSvgElement.js"></script>
<script src="Tooltips.js"></script>
<script>
function adjustFormPositionAfterSvgResizes() {
var svgContainer = document.getElementById('svgContainer');
var myForm = document.getElementById('myForm');
if(myForm == null)
return;
// Get the current height of the svgContainer
if(svgContainer) // it doesn't exist until the Display form is processed
var currentHeight = svgContainer.offsetHeight;
// Adjust the form's margin to prevent overlap
myForm.style.marginTop = (currentHeight + 20) + 'px'; // Adjust as needed for spacing
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const addEquationBtn = document.getElementById('addEquationBtn');
const formulaForm = document.getElementById('formulaForm');
const nequationsInput = document.getElementById('nequations');
let parseError = document.querySelector('.parserError');
if(parseError == null){
console.log("parse successful");
}
addEquationBtn.addEventListener('click', function() {
let nequations = parseInt(nequationsInput.value);
if (nequations < 6) {
nequations++;
nequationsInput.value = nequations;
// Add a new input field
const newFieldDiv = document.createElement('div');
newFieldDiv.className = 'function-entry';
const newInput = document.createElement('input');
newInput.type = 'text';
newInput.name = 'linearEquation' + nequations;
newInput.id = 'linearEquationID' + nequations;
newInput.placeholder = 'Enter equation';
newFieldDiv.appendChild(newInput);
document.getElementById('EntryFields').appendChild(newFieldDiv);
setLanguage('<?php echo($language); ?>');
}
if (nequations >= 6) {
addEquationBtn.style.display = 'none';
document.getElementById('addEquationLabel').style.display = 'none';
}
});
});
document.addEventListener('DOMContentLoaded', function() {
setLanguage('<?php echo($language); ?>');
if(document.getElementById('parsedTerm'))
moveSvgElementToContainer("parsedTerm", "svgContainer");
// Adjust the form position right after resizing the container
adjustFormPositionAfterSvgResizes();
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (typeof editflag !== "undefined" && editflag) {
let inputField = document.getElementById('linearEquationID1');
topic = editTopic; // will get us more refined solutions maybe
presentProblem(topic, problemText, inputField, problemtype);
return;
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
if ('<?php echo $showAddFunctionBtn; ?>' === 'no') {
document.getElementById('addEquationBtn').style.display = 'none';
document.getElementById('addEquationLabel').style.display = 'none';
}
});
</script>
<script src="FetchMessage.js"></script>
<script src="arrowButton.js"> </script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists