-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
151 lines (137 loc) · 7.86 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Leaps for Tablet</title>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<link href="game.css" rel="stylesheet">
<link href="fonts/css/fontello.css" rel="stylesheet">
</head>
<body>
<div id="game-parent">
<div id="game-container">
<canvas id="pixi-canvas"></canvas>
<div id="html-layer">
<div id="sections">
<div id="intro-gui">
<h1>ברוכים הבאים למשחק הצורות המשתנות</h1>
<p>מטרתכם היא לגלות צורות מעניינות ויפות.</p>
<p>על מנת להמשיך, אנא הזינו את מזהה הנבדק שלכם.</p>
<br>
<p><input id="user-provided-id"></p>
<br><button id="done-intro">המשך</button></p>
</div>
<div id="training-gui">
<h1>שלב האימון</h1>
<div id="training-1">
<p>במשחק הזה תחקרו את מרחב הצורות המשתנות
<br>כדי ליצור צורות מעניינות ויפות.
</p>
<p>על מנת ליצור את הצורות הללו עליכם להזיז את הריבועים הירוקים המופיעים על המסך.</p>
<div class="bottom-text">
<p class="highlight">גררו את הריבוע השמאלי ביותר או הימני ביותר למקום אחר.</p>
<br><button id="done-training-1" class="hidden">המשך</button>
</div>
</div>
<div id="training-2" class="hidden">
<p>ניתן להזיז כל ריבוע, ובתנאי שכל הריבועים יישארו צמודים זה לזה.
<br>אם יש ריבוע שלא ניתן להזזה, עליכם לבחור בריבוע אחר.
</p>
<div class="bottom-text">
<p>ניתן להזיז כמה ריבועים שתרצו,
<br>עד שתמצאו צורה יפה ומעניינת בעיניכם.</p>
<br><button id="done-training-2">הבנתי</button>
</div>
</div>
<div id="training-3" class="hidden">
<p>כאשר יצרתם צורה יפה ומעניינת בעיניכם, תוכלו לשמור אותה
<br>על ידי לחיצה על התיבה האפורה, על ידי לחיצה על כפתור "שמור צורה".</p>
<div class="bottom-text">
<p class="highlight">לחצו עכשיו לשמירת הצורה.</p>
</div>
</div>
<div id="training-4" class="hidden">
<p>כאשר המשחק יסתיים, תוכלו לראות את כל הצורות שיצרתם
<br>ותתבקשו לבחור את חמש הצורות האהובות עליכם.
</p>
<div class="bottom-text">
<p>לאחר 12 דקות של משחק, כפתור הסיום ייצבע באדום, לחצו עליו על-מנת לסיים.
<br>תודה ומשחק מהנה!
</p>
<button id="done-training-4">בואו נשחק</button>
</div>
</div>
</div>
<div id="blocks-gui">
<button id="add-shape">שמור צורה</button>
<br><button id="done-adding">סיום</button>
<p id="end-early-message" class="hidden">צריך לאסוף לפחות 5 צורות כדי לעבור לשלב הבא</p>
<p id="stuck-message" class="vertical-align hidden">אופס, הזמן נגמר!
<br>צריך לאסוף לפחות 5 צורות על מנת להמשיך
<br>
<br>טען מחדש ונסה שוב
</p>
<p id="continue-message" class="vertical-align hidden">נגמר הזמן!
<br>
<br>לחצו על הלחצן למטה כדי להמשיך
</p>
<div id="modal-confirm-done" class="hidden">
<div id="modal-confirm-box">
<p>האם את בטוח/ה שברצונכם לסיים עכשיו?</p>
<button id="modal-confirm-cancel-button">חזור למשחק</button>
<button id="modal-confirm-done-button">סוף המשחק</button>
</div>
</div>
</div>
<div id="selection-gui">
<p id="gallery-instructions">אלו הצורות שאספתם במהלך המשחק.
<br>אנא בחרו מתוכן את 5 הצורות היצירתיות ביותר בעיניכם.
</p>
<button id="done-selection">סיום</button>
<button id="previous-page-button">למסך הקודם</button>
<button id="next-page-button">למסך הבא</button>
</div>
<div id="results-gui">
<div id="results-block">
<h1>תוצאות</h1>
<div id="results-text" class="bottom-text">
<p id="rapid-search-text" class="hidden">
המחקר שלנו מראה שחיפוש יצירתי הוא טרייד-אוף בין חדשנות למשמעות
<br>שיטת המשחק שלך מרמזת שאתה <span class="highlight"><span class="searchScorePercent highlight"></span>%</span>נוטה יותר לכיוון חיפוש שהוא <span class="highlight">מהיר ומתרחב.</span>
בסוג זה של חיפוש, שחקנים נוטים לנוע במהירות בין צורות, ויוצרים צורות רבות אשר שייכות לקטגוריות ויזואליות שונות.
אסטרטגיית חיפוש זו בדרך כלל מייצרת צורות ייחודיות יותר במשחק שלנו
</p>
<p id="focused-search-text" class="hidden">
המחקר שלנו מראה שחיפוש יצירתי הוא טרייד-אוף בין חדשנות למשמעות
<br>שיטת המשחק שלך מרמזת שאתה <span class="highlight"><span class="searchScorePercent highlight"></span>%</span> נוטה יותר לכיוון חיפוש שהוא <span class="highlight">ממוקד ובעל עומק.</span>
אשר תוצאתו משמעות חזותית גבוהה יותר.
בסוג זה של חיפוש, שחקנים נוטים להתמקד בכל קטגוריה חזותית שהם מגלים, ע"י איסוף צורות שהושקע בהן הרבה מחשבה
ונמצאות בקונצנזוס.
אסטרטגיית חיפוש זו בדרך כלל מייצרת צורות שנושאות יותר משמעות במשחק שלנו.
</p>
<p><br>מזהה המשחק שלך: <br><br><span class="code" id="code"></span></p>
<p id="followup-link-container">על מנת להשלים את הניסוי,<a id="followup-link" href="">אנא עקוב אחר קישור זה</a>.</p>
</div>
</div>
<div id="thanks-block">
<h1 class="vertical-align">תודה ששיחקת!</h1>
<br>
<p>אנא חזרו לעמוד הסקר הראשי והמשיכו על פי ההוראות.</p>
</div>
</div>
</div>
<div id="fullscreen-button">
<i id="fullscreen-button-full" class="icon-resize-full"></i>
<i id="fullscreen-button-small" class="icon-resize-small"></i>
</div>
</div>
</div>
</div>
<script src="deps/pixi.js"></script>
<script src="deps/q.js"></script>
<script src="deps/q-xhr.js"></script>
<script src="deps/underscore.js"></script>
<script src="deps/redmetrics.js"></script>
<script src="bundle.js"></script>
</body>
</html>