Homework/index.html at master · JaggedLine/Homework · GitHub

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
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
    <link rel="shortcut icon" href="Images/favicon.png">

    <title>Homework</title>
</head>

<body>
    <nav class="my-navbar">
        <div class="container">
            <a href="index.html" class="brand">
                <img src="Images/logo.png" class="image-sm"><img src="Images/logo2.png" class="image-sm">
            </a>
        </div>
    </nav>
    <div class="container">
        <div class="flex">
            <div class="column base-50 minw-300 jumbotron bg-white">
                <p class="title text-center">Geometric puzzle</p>
                <p class="text col-darkgrey">
                    Find the longest solution, which is built in the maximum possible moves,
                    - and you will get the highest score.
                </p>
            </div>
            <div class="column base-50 minw-300 geo-image"></div>
        </div>
        <div class="flex">
            <div class="column base-50 minw-300 jumbotron bg-darkblue">
                <p class="title text-center col-white">The longest polygonal chain</p>
                <p class="text col-grey">
                    Construct the longest non-self-intersecting polyline
                    whose vertices are nodes of the grid and the length of each edge is knight move.
                </p>
                <br>
                <input id="name" placeholder="Your name" class="my-10">
                <button class="bg-orange my-10" id="submit_button" disabled>
                    Your score is <span id="score">0</span>. <span id="submit_it" hidden>Submit it!</span>
                </button>
                <span class="col-green" id="submit_success" hidden>Your chain was successfully submitted!</span>
                <span class="col-red" id="submit_error" hidden></span>
            </div>
            <div class="column base-50 minw-300 jumbotron bg-darkblue">
                <div class="column">
                    <div class="mx-auto my-auto field" id="field">
                        <div id="grid"></div>
                        <div id="segments"></div>
                        <div id="nodes"></div>
                        <div id="data" style="display: none"></div>
                    </div>
                </div>
                <br>
                <div class="flex mx-auto field-navigator" id="field_navigator">
                    <div class="column base-0">
                        <button fieldsizex="6" fieldsizey="6">6x6</button>
                    </div>
                    <div class="column base-0">
                        <button class="active" fieldsizex="7" fieldsizey="7">7x7</button>
                    </div>
                    <div class="column base-0">
                        <button fieldsizex="8" fieldsizey="8">8x8</button>
                    </div>
                    <div class="column base-0">
                        <button fieldsizex="10" fieldsizey="10">10x10</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex">
            <div class="column base-50 minw-300 jumbotron bg-white">
                <p class="title">Rules</p>
                <p class="text-sm">
                    <span class="fa fa-check-square col-green"></span>
                    Carefully read the statement of the problem and look at the picture with example.
                </p>
                <p class="text-sm">
                    <span class="fa fa-check-square col-green"></span>
                    Solve the problem on squared paper or in one of the levels from #Pythagorea app.
                </p>
                <p class="text-sm">
                    <span class="fa fa-check-square col-green"></span>
                    Post a screenshot of your solution. Your account should be public so that we can see your post.
                </p>
                <p class="text-sm">
                    <span class="fa fa-check-square col-green"></span>
                    Add hashtags #euclidea and #euclidea_puzzle_8.
                </p>
                <p class="text-sm">
                    <span class="fa fa-check-square col-green"></span>
                    Mention @euclidea_app on the screenshot.
                </p>
                <p class="text-sm">
                    <span class="fa fa-check-square col-green"></span>
                    Write a kukarek why your answer is correct (optional).
                </p>
                <p class="text-sm">
                    <span class="fa fa-check-square col-darkgrey"></span>
                    You can also send us a message with solution in Direct, but publishing a post is better.
                </p>
            </div>
            <div class="column base-50 minw-300 jumbotron bg-green">
                <div class="leaderboards-title">
                    <p class="title col-white">
                        Leaderboards
                    </p>
                    <p class="col-white">
                        <i>field size: <span id="fieldSize">7x7</span></i>
                    </p>
                </div>
                <div class="table-responsive">
                    <table>
                        <tbody>
                            <tr>
                                <td class="col-white">1. </td>
                                <td class="col-white text-cut"><span id="n1">Nobody</span></td>
                                <td class="col-white"><span id="s1">---</span> points</td>
                            </tr>
                            <tr>
                                <td class="col-white">2. </td>
                                <td class="col-white text-cut"><span id="n2">Nobody</span></td>
                                <td class="col-white"><span id="s2">---</span> points</td>
                            </tr>
                            <tr>
                                <td class="col-white">3. </td>
                                <td class="col-white text-cut"><span id="n3">Nobody</span></td>
                                <td class="col-white"><span id="s3">---</span> points</td>
                            </tr>
                            <tr>
                                <td class="col-white">4. </td>
                                <td class="col-white text-cut"><span id="n4">Nobody</span></td>
                                <td class="col-white"><span id="s4">---</span> points</td>
                            </tr>
                            <tr>
                                <td class="col-white">5. </td>
                                <td class="col-white text-cut"><span id="n5">Nobody</span></td>
                                <td class="col-white"><span id="s5">---</span> points</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script src="Chain-Field/common.js"></script>
    <script src="Chain-Field/animations.js"></script>
    <script src="Chain-Field/games.js"></script>
    <script src="Chain-Field/ChainField.js"></script>
    <script src="Scripts/config.js"></script>
    <script src="Scripts/initChainField.js"></script>
    <script src="Scripts/FieldNavigator.js"></script>
    <script src="Scripts/submit.js"></script>
    <script src="Scripts/score_table.js"></script>
</body>

</html>