-
Notifications
You must be signed in to change notification settings - Fork 0
/
rephrase.html
253 lines (242 loc) · 9.66 KB
/
rephrase.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Miro Plugin</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f8f9fa;
}
.section {
margin-bottom: 20px;
}
.term {
padding: 2px 5px;
border-radius: 3px;
}
.term.vague {
background-color: lavender;
}
.term.jargon {
background-color: lightblue;
}
.term.granular {
background-color: lightgreen;
}
.term.non-obvious {
background-color: mistyrose;
}
.options {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ccc;
padding: 10px;
z-index: 1000;
}
.options span {
display: block;
cursor: pointer;
padding: 5px;
}
.options span:hover {
background-color: #f8f9fa;
}
.button-container {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 10px;
}
.term-btn {
cursor: pointer;
padding: 5px 10px;
border-radius: 5px;
color: white;
transition: background-color 0.3s;
}
.term-btn.vague {
background-color: purple;
}
.term-btn.jargon {
background-color: blue;
}
.term-btn.granular {
background-color: green;
}
.term-btn.non-obvious {
background-color: red;
}
.term-btn:hover {
opacity: 0.8;
}
.navbar {
padding: 0.5rem 1rem;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Miro Plugin</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Ideation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="recombination.html">Recombination</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Rephrase</a>
</li>
<li class="nav-item">
<a class="nav-link" href="group.html">Group & Priority</a>
</li>
<li class="nav-item">
<a class="nav-link" href="orsd.html">ORSD</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cqs.html">CQs</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<h2>User Story</h2>
<div class="section">
<h4>Persona</h4>
<p>Linka, a <span class="term granular">researcher</span> in <span class="term jargon">computer science</span></p>
</div>
<div class="section">
<h4>Goal</h4>
<p><span class="term vague">Finding/describing</span> music-related <span class="term jargon">data</span> of <span class="term non-obvious">multiple formats</span> from <span class="term vague">different sources</span></p>
</div>
<div class="section">
<h4>Keywords</h4>
<p><span class="term jargon">music data</span>, <span class="term jargon">multi-modal data</span>, <span class="term jargon">knowledge discovery</span></p>
</div>
<div class="section">
<h4>Scenario</h4>
<h5>Before</h5>
<p>The <span class="term jargon">analytical</span> and <span class="term vague">manual process</span> to <span class="term vague">find</span> music data on the <span class="term jargon">Web</span> from different sources is <span class="term non-obvious">unmanageable</span> and <span class="term vague">time-consuming</span></p>
<h5>During/after</h5>
<p><span class="term non-obvious">Possibility</span> to <span class="term vague">perform</span> all the operations in an <span class="term jargon">automatic</span> manner and with <span class="term vague">little supervision</span></p>
</div>
<div class="section">
<h4>Stories</h4>
<ul>
<li><span class="term granular">"Penny Lane"</span> is a <span class="term jargon">musical work</span> by <span class="term granular">"The Beatles"</span></li>
<li>The <span class="term granular">first recording</span> of <span class="term granular">"Penny Lane"</span> was <span class="term vague">released</span> in <span class="term granular">February 1967</span></li>
<li><span class="term granular">"Penny Lane"</span> was <span class="term jargon">covered</span> by <span class="term granular">"Kai Warner"</span> in <span class="term granular">1976</span></li>
</ul>
</div>
</div>
<div class="button-container">
<span class="term-btn vague">Vague Terms</span>
<span class="term-btn jargon">Tech. Jargons</span>
<span class="term-btn granular">Granularity</span>
<span class="term-btn non-obvious">Non-obvious</span>
</div>
<div class="options">
<!-- Options will be dynamically inserted here -->
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Predefined terms and replacements
const terms = {
vague: ['Finding/describing', 'different sources', 'manual process', 'find', 'time-consuming', 'perform', 'little supervision', 'released'],
jargon: ['computer science', 'data', 'music data', 'multi-modal data', 'knowledge discovery', 'analytical', 'Web', 'automatic', 'musical work', 'covered'],
granular: ['researcher', '"Penny Lane"', '"The Beatles"', 'first recording', 'February 1967', '"Kai Warner"', '1976'],
'non-obvious': ['multiple formats', 'unmanageable', 'Possibility']
};
const replacements = {
'Finding/describing': ['Discovering', 'Identifying', 'Locating'],
'different sources': ['various origins', 'diverse sources', 'multiple platforms'],
'manual process': ['hand-operated procedure', 'non-automated process', 'human-driven approach'],
'find': ['locate', 'identify', 'discover'],
'time-consuming': ['lengthy', 'prolonged', 'slow'],
'perform': ['execute', 'carry out', 'conduct'],
'little supervision': ['minimal oversight', 'limited monitoring', 'reduced supervision'],
'released': ['published', 'issued', 'launched'],
'computer science': ['CS', 'computing', 'informatics'],
'data': ['information', 'records', 'datasets'],
'music data': ['musical information', 'audio records', 'song metadata'],
'multi-modal data': ['diverse data types', 'varied data formats', 'heterogeneous data'],
'knowledge discovery': ['insight extraction', 'information retrieval', 'data mining'],
'analytical': ['investigative', 'exploratory', 'examinational'],
'Web': ['internet', 'online', 'World Wide Web'],
'automatic': ['automated', 'computerized', 'mechanical'],
'musical work': ['composition', 'piece', 'song'],
'covered': ['reproduced', 'remade', 'adapted'],
'researcher': ['investigator', 'scientist', 'analyst'],
'"Penny Lane"': ['the song', 'the track', 'the composition'],
'"The Beatles"': ['the band', 'the group', 'the ensemble'],
'first recording': ['initial release', 'debut version', 'original recording'],
'February 1967': ['02/1967', 'Feb \'67', 'early 1967'],
'"Kai Warner"': ['the artist', 'the musician', 'the performer'],
'1976': ['the year 1976', 'the mid-1970s', 'the late 20th century'],
'multiple formats': ['various forms', 'different structures', 'diverse representations'],
'unmanageable': ['overwhelming', 'uncontrollable', 'difficult to handle'],
'Possibility': ['potential', 'capability', 'opportunity']
};
// Function to highlight terms
function highlightTerms(className) {
const termElements = document.querySelectorAll('.term');
termElements.forEach(term => term.classList.remove('term', ...Object.keys(terms)));
terms[className].forEach(term => {
const regex = new RegExp(`\\b${term}\\b`, 'gi');
document.querySelectorAll('.section p, .section li').forEach(el => {
el.innerHTML = el.innerHTML.replace(regex, `<span class="term ${className}">${term}</span>`);
});
});
}
// Function to show options for a term
function showOptions(term) {
const options = document.querySelector('.options');
options.innerHTML = '';
const text = term.textContent.toLowerCase();
if (replacements[text]) {
replacements[text].forEach(replacement => {
const span = document.createElement('span');
span.textContent = replacement;
span.addEventListener('click', () => {
term.textContent = replacement;
options.style.display = 'none';
});
options.appendChild(span);
});
const rect = term.getBoundingClientRect();
options.style.top = `${rect.bottom + window.scrollY}px`;
options.style.left = `${rect.left + window.scrollX}px`;
options.style.display = 'block';
}
}
// Add click event listeners to term buttons
document.querySelectorAll('.term-btn').forEach(btn => {
btn.addEventListener('click', () => {
const className = btn.classList[1];
highlightTerms(className);
});
});
// Add hover event listeners to highlighted terms
document.addEventListener('mouseover', e => {
if (e.target.classList.contains('term')) {
showOptions(e.target);
}
});
// Hide options when clicking outside
document.addEventListener('click', e => {
if (!e.target.closest('.options')) {
document.querySelector('.options').style.display = 'none';
}
});
</script>
</body>
</html>