-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
174 lines (173 loc) · 5.53 KB
/
index.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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Task Deset</title>
<style>
body, input, button {
font-family: "Trebuchet MS";
}
.deset-logo {
height: 2.3em;
vertical-align: middle;
}
fieldset {
border: 1px solid #000;
}
legend {
padding: 3px 6px;
background-color: #000;
color: #fff;
}
h2 {
margin: 0;
font-size: 1em;
}
fieldset h3 {
font-size: 1em;
}
label {
display: inline-block;
padding: 4px;
margin: 2px;
}
.digit-container {
overflow: hidden;
}
.digit-container label, #digits {
display: inline-block;
}
.digit-input {
width: 1.5em;
font-size: 1.2em;
padding: 2px 3px;
margin: 1px;
}
.num-input {
width: 5em;
}
dd label {
width: 18em;
}
button {
font-size: 1.2em;
padding: 6px 12px;
}
button {
background-color: #cec;
}
.ev {
background-color: #eec;
}
.od {
background-color: #cec;
}
#solutions {
background-color: #eee;
width: 90%;
height: 400px;
overflow: auto;
border: 1px solid #000;
padding: 8px;
line-height: 1.6em;
position: relative;
}
#solutions p {
margin: 0;
margin-bottom: 1em;
}
#sol_form .fieldset-cont {
float: left;
width: 50%;
min-width: 400px;
}
.sol-fieldset-font {
clear: left;
}
.func-part {
width: 75%;
float: left;
}
.info-box-cont {
float: right;
width: 25%;
min-width: 10em;
line-height: 1.3em;
}
.info-box {
padding: 1em;
font-size: .9em;
}
.author {
position: absolute;
top: 0;
right: 0;
padding: 1em 1.6em;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
</head>
<h1>Mathematical task <img class="deset-logo" src="deset-logo.png" alt="Deset"></h1>
<span class="author">Petr Pučil</span>
<div class="func-part">
<form id="sol_form">
<div class="fieldset-cont">
<fieldset>
<legend><h2>Allowed operations</h2></legend>
<dl class="inp-list" id="unary_ops">
<dt>Unary operations (with 1 input)</dt>
<dd><label class="ev" for="unary_minus"><input type="checkbox" id="unary_minus" checked> Negation (-)</label></dd>
<dd><label class="od" for="unary_sqrt"><input type="checkbox" id="unary_sqrt" checked> Square root (√)</label></dd>
<dd><label class="ev" for="unary_factorial"><input type="checkbox" id="unary_factorial" checked> Factorial (!)</label></dd>
</dl>
<dl class="inp-list" id="binary_ops">
<dt>Binary operations (with 2 inputs)</dt>
<dd><label class="ev" for="binary_plus"><input type="checkbox" id="binary_plus" checked> Addition (+)</label></dd>
<dd><label class="od" for="binary_mult"><input type="checkbox" id="binary_mult" checked> Multiplication (*)</label></dd>
<dd><label class="ev" for="binary_div"><input type="checkbox" id="binary_div" checked> Division (/)</label></dd>
<dd><label class="od" for="binary_pow"><input type="checkbox" id="binary_pow" checked> Exponentation (^)</label></dd>
</dl>
</fieldset>
</div>
<div class="fieldset-cont">
<fieldset>
<legend><h2>Task</h2></legend>
<label>Number of digits: <input class="num-input" type="number" min="2" max="10" value="4" id="digits_num"></label>
<div class="digit-container">
<label>Digits: </label>
<div id="digits"></div>
</div>
<label for="desired_num">Desired result: <input class="num-input" type="text" id="desired_num" value="10"></label>
<dl class="inp-list">
<dt>Number of solutions: </dt>
<dd><label class="ev" for="fst"><input type="radio" name="stop-policy" id="fst"> Find only the first solution</label></dd>
<dd><label class="od" for="arb"><input type="radio" name="stop-policy" id="arb" checked> Find the first <input class="num-input" type="number" id="sol_limit" min="1" value="20"> solutions</label></dd>
<dd><label class="ev" for="all"><input type="radio" name="stop-policy" id="all"> Find all solutions</label></dd>
</dl>
<button type="submit">Find solutions</button>
</fieldset>
</div>
</form>
<fieldset class="sol-fieldset-font">
<legend><h2>Solutions</h2></legend>
<div>Number of found solutions: <span id="num_sols">-</span></div>
<label><input type="checkbox" id="print_latex" checked="checked"> Enable LaTeX typesetting</label>
<pre id="solutions"></pre>
</fieldset>
</div>
<div class="info-box-cont">
<div class="info-box">
<h2>Usual task: </h2>
<p>Example: Inserting operators between digits so that the result is 10.</p>
<p>1 2 5 5</p>
<p>There are given 4 digits from 1 to 9. The task is to fill in numerical operators (+, −, ×, ÷, √ and !) so that the result of the created expression is 10.</p>
<h2>Variations: </h2>
<p>However, the program has more options. <strong>It is possible to change the number of entered digits, allowed operations and result.</strong> Finding a solution for higher number of digits may take a very long time. If you don't want to find all solutions, but only a limited number, check Find the first X solutions, it'll be faster.</p>
<p>There may be no solution for a given input.</p>
</div>
</div>
<script src="polyfills.js"></script>
<script src="deset.js"></script>
<script src="gui.js"></script>
</html>