-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
882 lines (695 loc) · 22 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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Regionalmeisterschaft IIIII0IIII0</title>
<meta name="author" content="Johan Chavaillaz, Gallus Glanzmann, Patrick Zahnd, Fabian Vogler">
<script src="readme/javascripts/html5.js"></script>
<script src="readme/javascripts/jquery-1.9.0.min.js"></script>
<script src="readme/fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" media="screen" href="readme/stylesheets/baseline.compress.css">
<link rel="stylesheet" media="screen" href="readme/stylesheets/screen.css">
<link rel="stylesheet" media="screen" href="readme/fancybox/jquery.fancybox.css">
<script>
$(function() {
$('.fancybox').fancybox();
$('.nav-list a').click(function (e) {
e.preventDefault();
var href = $.attr(this, 'href');
var top = $(href).offset().top;
$('html, body').animate({scrollTop: top});
window.location.hash = href;
});
var checkboxes = $('input:checkbox');
checkboxes.change(function () {
$('#points-checked').text(checkboxes.filter(':checked').size());
});
$('#points-total').text(checkboxes.size());
});
</script>
</head>
<body class="page-grid">
<div id="white"></div>
<div id="page">
<div class="full layout-grid">
<header class="column width4">
<div class="column unitx1 first">
<img src="readme/images/log_ictbbs_rgb_windows.png" width="107" height="62" alt="ICT Berufsbildung" />
</div>
<div class="column unitx3">
<h3>Regionalmeisterschaft IIIII0IIII0</h3>
</div>
<div class="column unitx4 skill">
<h3>Trade 17, Web Design</h3>
</div>
</header>
<section class="width4 first">
<h2 id="instructions" class="column width2 first">Instructions</h2>
<div class="column width2 nav-list">
<p>
<a href="#instructions">Instructions</a>,
<a href="#project">Project</a>,
<a href="#tasks">Tasks</a>,
<a href="#marking">Marking Schema</a>
</p>
</div>
<div class="column width2 first">
<h3>Introduction</h3>
<p>
This document describes the tasks to be performed for the Regional Champion­ships 2014
in the category Web Design. It is advised to read carefully and look at the
different provided templates.
</p>
<p>
You have 3 hours to complete as many tasks as possible without using any
external resources other than those provided. You are free to perform the
required tasks with all the skills you have using the tools provided.
In addition to the designs provided, it is of course possible to produce new
design elements or modify existing ones if you think it necessary.
</p>
<p>
You probably will not have enough time to complete all the formal and technical
criteria of the tasks. In this case, you must decide the criteria to achieve in
priority to win as many points as possible. But be careful to make a version of
the site running without errors.
</p>
<h3>Evaluation</h3>
<p>
Each task performed will be evaluated on the implementation carried out of
various features requested in the task description. In addition, the following
criteria are also involved in the evaluation;
</p>
<ul>
<li>All written code is properly formatted and indented</li>
<li>Each file, method and function is documented inline</li>
<li>The generated HTML and CSS complies with W3C standards</li>
<li>SQL queries are protected from any possible injections</li>
<li>No error occur (the level of error reporting is set to E_ALL)</li>
</ul>
<h3>Deliverables</h3>
<ul>
<li>
<b>Zip file:</b>
All deliverables must be submitted in a zip file.
The zip file includes the site files as well as a "dump" of the database
saved as “database.sql” and the filled out “competitor.txt”.
</li>
<li>
<b>File name:</b>
“WebDesign_Name_Surname.zip”
</li>
<li>
<b>File location:</b>
The file location will be indicated by the supervisor.
</li>
<li>
<b>Notes and documents:</b>
At the end of the competition you also submit all documents and notes to
the supervisor.
</li>
<li>
<b>Considered for evaluation:</b>
Only notes and entries made in the contents of the zip file will be
considered for the evaluation of the work.
</li>
</ul>
</div>
<div class="column width2">
<h3>Rules</h3>
<p>
To perform the tasks, the following rules apply:
</p>
<ul>
<li>Internet access is not allowed during the whole competition.</li>
<li>The use of any communication is prohibited (mobile, tablet, etc.).</li>
<li>No external storage can be used (USB, memory card, etc.).</li>
<li>You are not allowed to talk with other candidates.</li>
<li>No sound devices (headset, headphones, etc.) can be used.</li>
<li>No personal notes can be used.</li>
</ul>
<p>
The non-compliance with the rules may result in your disqualification from the
competition.
</p>
<h3>Tools</h3>
<p>
The tools available to perform the tasks in this document are:
</p>
<ul>
<li>Apache HTTP Server with PHP</li>
<li>Apache Tomcat with Java</li>
<li>MySQL</li>
<li>phpMyAdmin</li>
<li>Notepad++</li>
<li>Eclipse IDE for Java EE Developers</li>
<li>Eclipse with PDT (PHP Development Tools)</li>
<li>IntelliJ PHP Storm</li>
<li>Mozilla Firefox with Firebug</li>
<li>Google Chrome</li>
<li>Internet Explorer</li>
</ul>
<h3>Documentation</h3>
<p>
To perform the tasks of this project, you are given the application Zeal
which includes the following manuals:
</p>
<ul>
<li>PHP</li>
<li>Java</li>
<li>MySQL</li>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
</div>
</section>
<hr/>
<section class=" width4 first">
<h2 id="project">Project</h2>
<div class="column width2 first">
<h3>Introduction</h3>
<p>
One day a manager had the idea to create a website to help people
in IT technologies. He envisioned a website for sharing questions and answers.
The site allows users to ask questions through threads. Others can respond
to the questions and vote for the best answers.
</p>
<p>
Because information technologies are very diverse, the manager wants to
assign tags to each thread to classify and easily find them.
</p>
</div>
<div class="column width2">
<h3>Pages</h3>
<p>
Once the site is completed, it will consist of the following pages:
</p>
<ul>
<li>
<a href="templates/home.html">Home</a><br/>
This page contains the welcome message from the manager for visitors and highlights the “hottest” thread of the website.
</li>
<li>
<a href="templates/thread_list.html">Thread list</a><br/>
This page provides a list containing threads created by users. The search by name may also be possible. Each item in the list consists of the thread name as well as the first characters of the question.
</li>
<li>
<a href="templates/thread_detail.html">Thread details</a><br/>
This page is used to display the thread selected, including the name, description, tags, comments left by users and a system rating for each one. The page also contains a form to leave a comment.
</li>
</ul>
</div>
</section>
<hr/>
<section class=" width4 first">
<div class="column unitx1 first">
<h2 id="tasks">Tasks</h2>
</div>
<div class="column unitx3"></div>
<div class="column unitx2"></div>
<div class="column unitx2 last">
<h2 id="marking">Marking Scheme</h2>
For each achieved you get one point
</div>
<hr/>
<div class="column unitx1 first">
<h3 id="task0">Task 0</h3>
</div>
<div class="column unitx5">
<p>
Fill out the file named “competitor.txt” with your name, your email address,
your birthdate, your company and your school.
</p>
</div>
<div class="column unitx2">
<fieldset>
<label>
The file “competitor.txt” exists and is completely filled out.
</label>
</fieldset>
</div>
<hr/>
<div class="column unitx1 first">
<h3 id="task1">Task 1</h3>
</div>
<div class="column unitx3">
<p>
Design two tables: the comment table and the associative table between
thread and tag. Add some example content to them and export the database with
all the tables and the content into a file called “database.sql”.
</p>
<ul>
<li>A thread can have multiple tags</li>
<li>A tag can have multiple threads</li>
<li>A comment is associated with a thread</li>
<li>The first comment is the question itself</li>
<li>Comment fields: name and email of the author, a rating (up and down) represented by a number, and the content of the comment</li>
</ul>
</div>
<div class="column unitx2">
<p><a href="readme/images/starting-database.png" class="fancybox"><img src="readme/images/starting-database.png" height="229" alt="Starting Database"></a></p>
</div>
<div class="column unitx2">
<fieldset>
<label>
<input type="checkbox" name="" value="">
Database saved as “database.sql”
</label>
<label>
<input type="checkbox" name="" value="">
The two tables are created
</label>
<label>
<input type="checkbox" name="" value="">
The relationships between the tables use correct foreign keys
</label>
<label>
<input type="checkbox" name="" value="">
All needed fields are implemented with correct data types
</label>
<label>
<input type="checkbox" name="" value="">
Primary keys and auto-increments are set correctly
</label>
<label>
<input type="checkbox" name="" value="">
Example content exists
</label>
</fieldset>
</div>
<hr/>
<div class="column unitx1 first">
<h3 id="task2">Task 2</h3>
</div>
<div class="column unitx5">
<p>
Create a dynamic homepage with the programming language of your choice and
display the “hottest” thread from the database. It is recommended to create all
your work in a folder called “web” and copy the required CSS and JavaScript from
the template to this folder - this way you can always look at the original
templates again.
</p>
<ul>
<li>The thread with the highest rating total is displayed (up minus down)</li>
<li>Use the template included in the <a href="templates/home.html">home page</a></li>
</ul>
</div>
<div class="column unitx2">
<fieldset>
<label>
<input type="checkbox" name="" value="">
The section shows the hottest thread read from the database
</label>
<label>
<input type="checkbox" name="" value="">
The hottest thread is selected by the maximum total rating
</label>
<label>
<input type="checkbox" name="" value="">
The thread name, rating and description is shown
</label>
<label>
<input type="checkbox" name="" value="">
The prepared <a href="templates/home.html">home page template</a> is used
</label>
</fieldset>
</div>
<hr/>
<div class="column unitx1 first">
<h3 id="task3">Task 3</h3>
</div>
<div class="column unitx5">
<p>
Implement the thread list and the form to add a new thread. Read the data from
the database created in <a href="#task1">Task 1</a> and the templates provided
in the “templates” folder.
</p>
<ul>
<li>
The thread list shows all questions as seen on the <a href="templates/thread_list.html">thread list page</a>
<ul>
<li>Each thread description is cropped to a maximum of 200 chars</li>
<li>Thread are ordered chronological (newest first)</li>
</ul>
</li>
<li>
A form to add a thread is shown on the <a href="templates/thread_list.html">thread list page</a>
<ul>
<li>Add the form with the fields name, email, thread name and description</li>
<li>Check the format of the email address.</li>
<li>Handle errors that may occur (blank, invalid email, etc.).</li>
</ul>
</li>
</ul>
</div>
<div class="column unitx2">
<fieldset>
<legend>Thread list</legend>
<label>
<input type="checkbox" name="" value="">
Threads are ordererd chronological (newest first)
</label>
<label>
<input type="checkbox" name="" value="">
The thread details are shown for each thread (thread name, rating and description)
</label>
<label>
<input type="checkbox" name="" value="">
Links on the thread list go to the thread detail (thread title and read more
link) for each thread
</label>
<label>
<input type="checkbox" name="" value="">
Each thread description is cropped to a maxium of 200 chars
</label>
<label>
<input type="checkbox" name="" value="">
The prepared <a href="templates/thread_list.html">thread list template</a> is used
</label>
</fieldset>
<hr/>
<fieldset>
<legend>Thread add form</legend>
<label>
<input type="checkbox" name="" value="">
A form to add a thread is shown on the <a href="templates/thread_list.html">thread list page</a> (with email, thread name and description)
</label>
<label>
<input type="checkbox" name="" value="">
The form to add a thread works (thread is saved correctly)
</label>
<label>
<input type="checkbox" name="" value="">
Form errors are handled (blank, email format, etc.)
</label>
<label>
<input type="checkbox" name="" value="">
Entered data does not get lost when an error occurs
</label>
<label>
<input type="checkbox" name="" value="">
Entered form data is secured (no SQL injection is possible)
</label>
<label>
<input type="checkbox" name="" value="">
No script injection is possible (e.g. JavaScript code in description)
</label>
<input type="checkbox" name="" value="">
A success message is shown after the thread has been added
</label>
</fieldset>
</div>
<hr/>
<div class="column unitx1 first">
<h3 id="task4">Task 4</h3>
</div>
<div class="column unitx5">
<p>
Implement the thread detail pages with the database from
<a href="#task1">Task 1</a> and the templates provided in the “templates” folder.
</p>
<ul>
<li>
The detail is shown on the <a href="templates/thread_detail.html">thread detail page</a>
<ul>
<li>The first comment is the thread itself</li>
<li>All comments assigned to a thread are shown</li>
<li>Comments are ordered the way the were posted (oldest first)</li>
<li>Add links to the detail page on the thread list created in <a href="#task3">Task 3</a></li>
</ul>
</li>
<li>
A form to add a comment to a thread is shown on the <a href="templates/thread_detail.html">thread detail page</a>
<ul>
<li>Add the form with the fields name, email and comment</li>
<li>Check the format of the email address.</li>
<li>Handle errors that may occur (blank, invalid email, etc.).</li>
</ul>
</li>
</ul>
</div>
<div class="column unitx2">
<fieldset>
<legend>Thread detail</legend>
<label>
<input type="checkbox" name="" value="">
The thread detail is shown (thread name, email and the full description)
</label>
<label>
<input type="checkbox" name="" value="">
The comments of the thread are shown
</label>
<label>
<input type="checkbox" name="" value="">
Comments are ordererd chronological (oldest first)
</label>
<label>
<input type="checkbox" name="" value="">
The comment, author and rating is shown for each comment
</label>
<label>
<input type="checkbox" name="" value="">
The prepared <a href="templates/thread_detail.html">thread detail template</a> is used
</label>
</fieldset>
<hr/>
<fieldset>
<legend>Comment add form</legend>
<label>
<input type="checkbox" name="" value="">
A form to add a comment is shown on the <a href="templates/thread_detail.html">thread detail page</a> (with name, email and comment field)
</label>
<label>
<input type="checkbox" name="" value="">
The form to add a comment works (comment is saved correctly)
</label>
<label>
<input type="checkbox" name="" value="">
Form errors are handled (blank, email format, etc.)
</label>
<label>
<input type="checkbox" name="" value="">
Entered data does not get lost when an error occurs
</label>
<label>
<input type="checkbox" name="" value="">
Entered form data is secured (no SQL injection is possible)
</label>
<label>
<input type="checkbox" name="" value="">
No script injection is possible (e.g. JavaScript code in comment)
</label>
<input type="checkbox" name="" value="">
A success message is shown after the comment has been added
</label>
</fieldset>
</div>
<hr/>
<div class="column unitx1 first">
<h3 id="task5">Task 5</h3>
</div>
<div class="column unitx5">
<p>
Implement the rating system. Each thread / comment can be rated up or down by the user.
The clickable rating sums (plus and minus) are shown in the upper right corner
of each thread / comment.
</p>
<ul>
<li>You should finish the <a href="#task3">task 3</a> and <a href="#task4">task 4</a> before you can start with this task.</li>
<li>Implement the rating system on the <a href="templates/thread_detail.html">thread detail page</a></li>
<li><em>Bonus 1:</em> The user can only vote once for each comment (sessions)</li>
<li><em>Bonus 2:</em> Ajax!</li>
</ul>
<p>
Note: Do not waste time, make it simple and functional.
</p>
</div>
<div class="column unitx2">
<fieldset>
<legend>Rating</legend>
<label>
<input type="checkbox" name="" value="">
User can vote up or down for every comment (thread is also a comment)
</label>
<label>
<input type="checkbox" name="" value="">
Rating sums are calculated and displayed correctly
</label>
<label>
<input type="checkbox" name="" value="">
Working rating buttons implemented on home page, thread list and detail page
</label>
<input type="checkbox" name="" value="">
A success message is shown after the comment has been added
</label>
<label>
<input type="checkbox" name="" value="">
The given template is used
</label>
</fieldset>
<fieldset>
<legend>Bonus 1 (one vote per user)</legend>
<label>
<input type="checkbox" name="" value="">
The user can only vote once for each comment (thread is also a comment)
</label>
<label>
<input type="checkbox" name="" value="">
The session ID is used for the check (not the IP)
</label>
<label>
<input type="checkbox" name="" value="">
The buttons will disappear after voting for a comment
</label>
</fieldset>
<fieldset>
<legend>Bonus 2 (Ajax)</legend>
<label>
<input type="checkbox" name="" value="">
The page does not scroll to the top on voting
</label>
<label>
<input type="checkbox" name="" value="">
The rating request is sent by ajax
</label>
<label>
<input type="checkbox" name="" value="">
The ajax call to the server is a POST method
</label>
<label>
<input type="checkbox" name="" value="">
Multiple sending of vote is prevented (JavaScript implementation)
</label>
<label>
<input type="checkbox" name="" value="">
Rating will update the sum and the sum is correct (using JavaScript, no page reload)
</label>
</div>
<hr/>
<div class="column unitx1 first">
<h3 id="task6">Task 6</h3>
</div>
<div class="column unitx5">
<p>
Create a form which allows to assign tags to a thread on the
<a href="templates/thread_detail.html">tread detail page</a>.
Show the tag list below the thread name.
</p>
<ul>
<li>
Check if the tag already exists in the database when adding a new one:
<ul>
<li>if it exists, link the tag to the thread.</li>
<li>if not, create the new tag and link it to the thread</li>
</ul>
</li>
<li>Make the tag submission case insensitive (convert to lowercase when you check for tags)</li>
<li>Use the bootstrap “label” CSS class (search in documentation) for the tags displayed</li>
<li>Alert a success message - examples you can find in the <a href="templates/design.html">design page</a></li>
</ul>
</div>
<div class="column unitx2">
<fieldset>
<legend>Layout / Design</legend>
<label>
<input type="checkbox" name="" value="">
The tag list is shown underneath the thread name
</label>
<label>
<input type="checkbox" name="" value="">
Each tag is a link to the search form (the search page does not have to exist)
</label>
<label>
<input type="checkbox" name="" value="">
The bootstrap CSS "label" class is used for the tags displayed
</label>
</fieldset>
<hr/>
<fieldset>
<legend>Tag form</legend>
<label>
<input type="checkbox" name="" value="">
The tag form is displayed
</label>
<label>
<input type="checkbox" name="" value="">
Tags are only added in the database when they do not exist (no duplicates)
</label>
<label>
<input type="checkbox" name="" value="">
Tags are converted to lowercase
</label>
<label>
<input type="checkbox" name="" value="">
Multiple tags can be linked to the thread
</label>
<label>
<input type="checkbox" name="" value="">
Existing tags are connected to the thread
</label>
<label>
<input type="checkbox" name="" value="">
A success message is shown after the tag has been added
</label>
</fieldset>
</div>
<hr/>
<div class="column unitx1 first">
<h3 id="task7">Task 7</h3>
</div>
<div class="column unitx5">
<p>
Create an option to search by keywords on the
<a href="templates/thread_list.html">thread list page</a>.
</p>
</div>
<div class="column unitx2">
<fieldset>
<label>
<input type="checkbox" name="" value="">
The search form is displayed
</label>
<label>
<input type="checkbox" name="" value="">
The entered search string does not get lost after submitting the form
</label>
<label>
<input type="checkbox" name="" value="">
Entered keywords are splitted by space characters and searched for separately
</label>
<label>
<input type="checkbox" name="" value="">
All keywords have to be matched
</label>
<label>
<input type="checkbox" name="" value="">
The keywords search the thread name and description
</label>
<label>
<input type="checkbox" name="" value="">
Keywords also search for tags connected with the thread
</label>
<label>
<input type="checkbox" name="" value="">
The results on the <a href="templates/thread_list.html">thread list page</a> are filtered by keyword
</label>
<label>
<input type="checkbox" name="" value="">
A message is shown if no results are found
</label>
</fieldset>
</div>
<hr/>
<div class="column unitx6 first">
<p>Version 1.0</p>
</div>
<div class="column unitx1">
<p>Total points:</p>
</div>
<div class="column unitx1">
<h4><span id="points-checked">0</span> / <span id="points-total">0</span></h4>
</div>
</section>
</div>
</div>
</body>
</html>