-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathquestions.xml
131 lines (120 loc) · 6.21 KB
/
questions.xml
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
<HTMLQuestion xmlns="http://mechanicalturk.amazonaws.com/AWSMechanicalTurkDataSchemas/2011-11-11/HTMLQuestion.xsd">
<HTMLContent><![CDATA[
<!-- YOUR HTML BEGINS -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
<script type='text/javascript' src='https://s3.amazonaws.com/mturk-public/externalHIT_v1.js'></script>
</head>
<body>
<form name='mturk_form' method='post' id='mturk_form'
action='https://www.mturk.com/mturk/externalSubmit'><input type='hidden' value=''
name='assignmentId' id='assignmentId'/>
<!-- You must include this JavaScript file -->
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<!-- For the full list of available Crowd HTML Elements and their input/output documentation,
please refer to https://docs.aws.amazon.com/sagemaker/latest/dg/sms-ui-template-reference.html -->
<!-- You must include crowd-form so that your task submits answers to MTurk -->
<!--CSS-->
<style>
.image-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
margin: 20px;
}
.image-container {
position: relative;
cursor: pointer;
}
.image-container img {
width: 100%;
height: auto;
display: block;
}
.clicked {
opacity: 0.5;
}
.image-number {
position: absolute;
top: 50%; /* Center vertically */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Adjust for exact centering */
color: red;
font-family: 'Helvetica', sans-serif;
font-size: 60px;
z-index: 10;
display: none; /* Hide initially */
}
</style>
<!--Javascript-->
<script>
document.addEventListener('DOMContentLoaded', function() {
var imageContainers = document.querySelectorAll('.image-grid .image-container');
<!--List to hold the results-->
var clickedImagesSrc = [];
var clickedImagesInput = document.getElementById('clicked-images-input');
var clickOrder = 1;
imageContainers.forEach(function(container) {
var img = container.querySelector('img');
var numberDiv = document.createElement('div');
numberDiv.classList.add('image-number');
container.appendChild(numberDiv);
container.addEventListener('click', function() {
if (!img.classList.contains('clicked')) {
img.classList.add('clicked');
<!--This is where the image clicked on is added to the list. It will retain the order-->
clickedImagesSrc.push(img.src);
numberDiv.textContent = clickOrder++;
numberDiv.style.display = 'block'; // Show the number
<!--The list is updated-->
clickedImagesInput.value = JSON.stringify(clickedImagesSrc);
}
});
});
});
</script>
<crowd-form>
<h2>This is a <span style="color:blue">heading</span>.</h2>
<!--Initializing the list to collect the input-->
<input type="hidden" id="clicked-images-input" name="clickedImages" value="[]">
<div class="image-grid">
<div class="image-container">
<img class="image" src="https://mturk-guide.s3.us-west-2.amazonaws.com/img1.png" alt="Image 1">
</div>
<div class="image-container">
<img class="image" src="https://mturk-guide.s3.us-west-2.amazonaws.com/img2.png" alt="Image 2">
</div>
<div class="image-container">
<img class="image" src="https://mturk-guide.s3.us-west-2.amazonaws.com/img3.png" alt="Image 3">
</div>
<div class="image-container">
<img class="image" src="https://mturk-guide.s3.us-west-2.amazonaws.com/img4.png" alt="Image 4">
</div>
<div class="image-container">
<img class="image" src="https://mturk-guide.s3.us-west-2.amazonaws.com/img5.png" alt="Image 5">
</div>
<div class="image-container">
<img class="image" src="https://mturk-guide.s3.us-west-2.amazonaws.com/img6.png" alt="Image 6">
</div>
<div class="image-container">
<img class="image" src="https://mturk-guide.s3.us-west-2.amazonaws.com/img7.png" alt="Image 7">
</div>
<div class="image-container">
<img class="image" src="https://mturk-guide.s3.us-west-2.amazonaws.com/img8.png" alt="Image 8">
</div>
<div class="image-container">
<img class="image" src="https://mturk-guide.s3.us-west-2.amazonaws.com/img9.png" alt="Image 9">
</div>
<div class="image-container">
<img class="image" src="https://mturk-guide.s3.us-west-2.amazonaws.com/img10.png" alt="Image 10">
</div>
</div>
</crowd-form>
</body>
</html>
<!-- YOUR HTML ENDS -->
]]></HTMLContent>
<FrameHeight>600</FrameHeight>
</HTMLQuestion>