-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathactivity1.html
116 lines (104 loc) · 5.86 KB
/
activity1.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Chemical AI Lab</title>
<script src='main.js'></script>
<script src="https://cdn.jsdelivr.net/npm/scikit-learn@1.0.1/dist/scikit-learn.min.js"></script>
</head>
<body>
<div id="chemical" style="border:1px solid;">
<div class="menubar">
<div class="container flex">
<h1 class="logo">
<a href="index.html">Chemical AI Lab</a>
</h1>
</div>
</div>
<div class="trainingContainer">
<div class="trContainer flex">
<h2>Choose items that you can take into chemical lab </h2>
<div class="list" id = "divCheckboxs">
<script>
const xhr = new XMLHttpRequest();
const itemarr =new Array(99);
var container = document.getElementById('divCheckboxs');
xhr.open('GET', 'labjsondata.json');
xhr.onload = () => {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
i=0;
data.forEach(item => {
itemarr[i]=(item.Object);
i=i+1;
});
} else {
console.error('Failed to load JSON data');
}
shuffleArray(itemarr)
for (i=0;i<30;i++){
console.log(itemarr[0]);
const checkboxWrapperDiv = document.createElement("div");
const checkboxDiv = document.createElement("div");
checkboxDiv.classList.add("form-element");
var checkbox = document.createElement('input');
// var img = document.createElement("img");
// const imgDiv = document.createElement("div");
// imgDiv.classList.add("icon");
//img.src = "ImageIcon/"+itemarr[i]+".jpg";
//img.width = 80;
//img.height = 80;
checkbox.type = 'checkbox';
checkbox.id = itemarr[i];
checkbox.name = 'equipments';
checkbox.value = itemarr[i];
var imgName = "ImageIcon/"+itemarr[i]+".jpg";
var imgName1 = "'url(\"";
var imgName3 = "\")'";
console.log(imgName)
const encodedUrl = encodeURIComponent(imgName);
var label = document.createElement('label')
//label.style.width = '100px';
//label.style.height = '100px';
// checkboxDiv.classList.add("overlay");
label.htmlFor = itemarr[i];
label.appendChild(document.createTextNode(itemarr[i]));
label.style.backgroundImage = `url(${encodedUrl})`;
// label.style.backgroundImage = 'url("'+imgName+'")';
// label.style.backgroundImage = imgName1 + imgName2 + imgName3;
label.style.backgroundSize = 'cover';
//imgDiv.appendChild(img);
// label.appendChild(imgDiv);
checkboxDiv.appendChild(checkbox);
checkboxDiv.appendChild(label);
checkboxWrapperDiv.appendChild(checkboxDiv);
checkboxWrapperDiv.appendChild(document.createElement("br"));
container.appendChild(checkboxWrapperDiv);
}
};
console.log(itemarr[0]);
xhr.send();
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
</script>
</div>
<button id="next" >Next</button>
</div>
</div>
</div>
</body>
</html>