-
Notifications
You must be signed in to change notification settings - Fork 0
/
review-type-dashboard.html
259 lines (247 loc) · 12.1 KB
/
review-type-dashboard.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Review Type Decision Tree</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
h1 {
text-align: center;
color: #2c3e50;
}
h2 {
text-align: center;
color: #34495e;
}
button {
background-color: #4285f4;
color: white;
border: none;
padding: 10px 15px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #3063b8;
}
button:disabled {
background-color: #bdc3c7;
cursor: not-allowed;
}
#result {
font-weight: bold;
justify-content: center;
margin-top: 20px;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.yes-button {
background-color: #01ab96;
}
.no-button {
background-color: #ee685c;
}
.yes-button:hover {
background-color: #008574;
}
.no-button:hover {
background-color: #c4554b;
}
</style>
</head>
<body>
<div class="card">
<h1>Review Type Decision Tree</h1>
<img src="https://raw.githubusercontent.com/cpetrule/playground/main/deci_tree.png" alt="Decision Tree Diagram" style="max-width: 100%; height: auto; margin: 10px 0;">
<p id="description">Answer the questions to determine the most suitable review type for your research.</p>
<div id="questionContainer">
<h2 id="questionText"></h2>
<div id="options"></div>
</div>
<div id="result"></div>
<div class="footer">
<button id="backBtn" onclick="goBack()" disabled>Back</button>
<span id="progress"></span>
<button id="resetBtn" onclick="resetQuiz()" style="display: none;">Start Over</button>
</div>
</div>
<script>
const reviewTypes = {
traditional: {
title: "Traditional Review",
description: `You are conducting a Traditional Review: a narrative summary and overview of existing literature on a topic, often without a systematic methodology, systematic search, or quality assessment. Used to provide a broad overview or summary of a subject area.<br><br>Here is the link to the report form: <a href="https://forms.gle/8yRTvbw1PtvZuMir9" target="_blank">Traditional Review Report Form</a>`
},
rapid: {
title: "Rapid Review",
description: `You are conducting a Rapid Review: a streamlined systematic review that uses accelerated and simplified processes to synthesize evidence within a shortened timeframe. Used when there is a need for quick evidence summaries, often in policy or decision-making contexts.<br><br>Here is the link to the report form: <a href="https://forms.gle/ir6TGgzUHLhacZ8h6" target="_blank">Rapid Review Report Form</a>`
},
scoping: {
title: "Scoping/Mapping Review",
description: `You are conducting a Scoping/Mapping Review: a preliminary review that maps the key concepts, types of evidence, and gaps in a research area, often used to determine the feasibility and scope of a full systematic review.<br><br>Here is the link to the report form: <a href="https://forms.gle/ZunHJ8Hb8hcXXvc37" target="_blank">Scoping/ Mapping Review Report Form</a>`
},
critical: {
title: "Critical Review",
description: `You are conducting a Critical Review: which provides a critical evaluation of existing literature on a particular topic, identifying strengths, weaknesses, and gaps. Used to synthesize and critique a body of research. Typically results in a hypothesis or model.<br><br>Here is the link to the report form: <a href="https://forms.gle/nHaueZTXMJKm9SEu6" target="_blank">Critical Review Report Form</a>`
},
systematicQualitative: {
title: "Systematic Qualitative Review",
description: `You are conducting a Systematic Qualitative Review: a systematic approach to synthesizing qualitative research studies (interviews, observational data), often using techniques like meta-ethnography or thematic synthesis. Used to develop deeper insights and interpretations of complex phenomena.<br><br>Here is the link to the report form: <a href="https://forms.gle/QHnyc4Rn6CV58Qsa9" target="_blank">Systematic Qualitative Review Report Form</a>`
},
systematicQuantitative: {
title: "Systematic Quantitative Review",
description: `You are conducting a Systematic Quantitative Review: a rigorous review that follows a predefined methodology to identify, critically appraise, and synthesizes all relevant studies on a specific research question. Used to provide a comprehensive and unbiased summary of the best available evidence.<br><br>Here is the link to the report form: <a href="https://forms.gle/S57sh3Bc4mpNd4H37" target="_blank">Systematic Quantitative Review Report Form</a>`
},
systematicMixed: {
title: "Systematic Mixed Methods Review",
description: `You are conducting a Systematic Mixed Methods Review: which integrates both qualitative and quantitative evidence and methods to develop a comprehensive understanding of a complex issue or intervention. Used to combine different forms of evidence.<br><br>Here is the link to the report form: <a href="https://forms.gle/3LSys47iAY2cFkWC7" target="_blank">Systematic Mixed Methods Report Form</a>`
},
metaAnalysis: {
title: "Meta-Analysis",
description: `You are conducting a Meta Analysis: a quantitative statistical analysis that combines the results of multiple studies to provide a comprehensive estimate of an effect or relationship (overall effect size). Used to synthesize the results of multiple studies, increase statistical power and resolve inconsistencies across studies.<br><br>Here is the link to the report form: <a href="https://forms.gle/KthRcJy4k7qkWyr88" target="_blank">Meta-Analysis Report Form</a>`
}
};
const questions = [
{
id: 1,
text: "Does the review follow systematic methodological guidelines and are those processes transparently documented?",
options: [
{ text: "Yes", nextQuestion: 2 },
{ text: "No", result: "traditional" }
]
},
{
id: 2,
text: "Does the review simplify the search and/or screening process to produce information in a short period of time?",
options: [
{ text: "Yes", result: "rapid" },
{ text: "No", nextQuestion: 3 }
]
},
{
id: 3,
text: "Does the review aim at examining the extent, range, and nature of research activity to give an overview of topic or area, without deeper analysis and structured synthesis of study results?",
options: [
{ text: "Yes", result: "scoping" },
{ text: "No", nextQuestion: 4 }
]
},
{
id: 4,
text: "Does the review focus on a conceptual contribution of the included literature and not include a quality assessment of empirical studies included?",
options: [
{ text: "Yes", result: "critical" },
{ text: "No", nextQuestion: 5 }
]
},
{
id: 5,
text: "What kind of data has been collected?",
options: [
{ text: "Qualitative", result: "systematicQualitative" },
{ text: "Quantitative", nextQuestion: 6 },
{ text: "Mixed", result: "systematicMixed" }
]
},
{
id: 6,
text: "Did you use statistical methods to combine the results of multiple studies for a comprehensive estimate?",
options: [
{ text: "Yes", result: "metaAnalysis" },
{ text: "No", result: "systematicQuantitative" }
]
}
];
let currentQuestion = 0;
const history = [];
function displayQuestion() {
const question = questions[currentQuestion];
document.getElementById('questionText').innerHTML = `Question ${currentQuestion + 1}:<br>${question.text}`;
const optionsContainer = document.getElementById('options');
optionsContainer.innerHTML = '';
question.options.forEach((option) => {
const button = document.createElement('button');
button.textContent = option.text;
// Apply specific styling for "Yes" and "No" buttons
if (option.text === "Yes") {
button.classList.add('yes-button'); // Add class for "Yes"
} else if (option.text === "No") {
button.classList.add('no-button'); // Add class for "No"
}
button.onclick = () => handleAnswer(option);
optionsContainer.appendChild(button);
});
updateProgress();
}
function handleAnswer(option) {
history.push(currentQuestion);
if (option.result) {
displayResult(option.result);
} else {
currentQuestion = option.nextQuestion - 1;
displayQuestion();
}
document.getElementById('backBtn').disabled = false;
}
function displayResult(result) {
const reviewType = reviewTypes[result];
document.getElementById('questionContainer').style.display = 'none';
document.getElementById('result').innerHTML = `
<h2>${reviewType.title}</h2>
<p>${reviewType.description}</p>
`;
document.getElementById('resetBtn').style.display = 'block';
document.getElementById('backBtn').style.display = 'none';
document.getElementById('progress').style.display = 'none';
document.getElementById('description').style.display = 'none';
}
function goBack() {
if (history.length > 0) {
currentQuestion = history.pop();
displayQuestion();
if (history.length === 0) {
document.getElementById('backBtn').disabled = true;
}
}
}
function resetQuiz() {
currentQuestion = 0;
history.length = 0;
document.getElementById('questionContainer').style.display = 'block';
document.getElementById('result').innerHTML = '';
document.getElementById('resetBtn').style.display = 'none';
document.getElementById('backBtn').style.display = 'inline-block';
document.getElementById('backBtn').disabled = true;
document.getElementById('progress').style.display = 'inline';
document.getElementById('description').style.display = 'block';
displayQuestion();
}
function updateProgress() {
document.getElementById('progress').innerHTML = `Question ${currentQuestion + 1} of ${questions.length}`;
}
// Start the quiz
displayQuestion();
</script>
</body>
</html>