-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathbackup_assignments.html
133 lines (127 loc) · 4.81 KB
/
backup_assignments.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lessons / Booking - Tutoring Website</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
/* Custom styles for the color scheme */
body {
background-color: rgb(234, 234, 234);
color: rgb(0, 0, 0);
}
.navbar {
background-color: rgb(0, 0, 0);
}
.navbar-dark .navbar-nav .nav-link {
color: rgb(20, 112, 175); /* Dark blue */
}
.navbar-dark .navbar-nav .nav-link:hover {
color: rgb(142, 182, 220); /* Light blue on hover */
}
.jumbotron {
background-color: rgb(234, 234, 234);
}
.jumbotron h1, .jumbotron p {
color: rgb(20, 112, 175); /* Dark blue */
}
.mq-editable-field {
border: 0.5px solid #ccc;
padding: 5px;
min-height: 40px;
}
.mathquill-container {
margin-top: 20px; /* Adjust this value to move the MathQuill field down */
}
</style>
<!-- MathQuill CSS -->
<link rel="stylesheet" href="./mathquill.css"/> <!-- Relative path for MathQuill CSS -->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html">Tutoring</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="lessons.html">Lessons/Booking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="assignments.html">Assignments</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Sign Up / Log In</a>
</li>
</ul>
</div>
</nav>
<!-- Lessons / Booking Section -->
<section id="lessons" class="py-5">
<div class="container">
<h2 class="text-center">Math Equation Editor</h2>
<p>Question: Solve for x: \(x = \frac{3}{2^2}\)</p>
<div id="equation-editor" class="mathquill-container">
<p><span id="answer" class="mq-editable-field">x=\frac{3}{2^2}</span></p>
<button id="submit-answer" class="btn btn-primary">Submit Answer</button>
<p id="feedback"></p>
</div>
</div>
</section>
<!-- JavaScript for redirection -->
<script>
function redirectToLogin() {
// Redirect to the login page
window.location.href = "login.html";
}
</script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap JS and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- React and ReactDOM -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<!-- MathQuill JS -->
<script src="./mathquill.js"></script> <!-- Relative path for MathQuill JS -->
<script>
$(document).ready(function() {
var MQ = MathQuill.getInterface(2);
var answerSpan = document.getElementById('answer');
var answerMathField = MQ.MathField(answerSpan, {
spaceBehavesLikeTab: false, // configurable
handlers: {
edit: function() { // useful event handlers
var enteredMath = answerMathField.latex(); // Get entered math in LaTeX format
console.log('Current LaTeX: ' + enteredMath);
}
}
});
$('#submit-answer').click(function() {
var enteredMath = answerMathField.latex(); // Get entered math in LaTeX format
var correctAnswer = 'x=\\frac{3}{4}'; // Correct answer in LaTeX format
if (enteredMath === correctAnswer) {
$('#feedback').text('Correct!').css('color', 'green');
} else {
$('#feedback').text('Incorrect, try again.').css('color', 'red');
}
});
});
</script>
</body>
</html>