Skip to content

Commit c832f49

Browse files
developeranazdeveloperanaz
authored
Create qjc.html
1 parent 3f492fe commit c832f49

File tree

1 file changed

+223
-0
lines changed

1 file changed

+223
-0
lines changed

‎webapps/quiz/qjc.html‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Quiz JSON Corrector</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
margin: 20px;
11+
background-color: #f0f2f5;
12+
}
13+
14+
.container {
15+
max-width: 1200px;
16+
margin: 0 auto;
17+
}
18+
19+
.input-section {
20+
background: white;
21+
padding: 20px;
22+
border-radius: 8px;
23+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
24+
margin-bottom: 20px;
25+
}
26+
27+
textarea {
28+
width: 100%;
29+
height: 200px;
30+
margin: 10px 0;
31+
padding: 10px;
32+
border: 1px solid #ddd;
33+
border-radius: 4px;
34+
box-sizing: border-box;
35+
}
36+
37+
button {
38+
background-color: #4CAF50;
39+
color: white;
40+
padding: 12px 24px;
41+
border: none;
42+
border-radius: 4px;
43+
cursor: pointer;
44+
font-size: 16px;
45+
transition: background-color 0.3s;
46+
margin: 5px;
47+
width: 200px;
48+
}
49+
50+
button:hover {
51+
background-color: #45a049;
52+
}
53+
54+
.editor {
55+
display: none;
56+
background: white;
57+
padding: 20px;
58+
border-radius: 8px;
59+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
60+
}
61+
62+
.question-card {
63+
margin: 15px 0;
64+
padding: 15px;
65+
border: 1px solid #eee;
66+
border-radius: 8px;
67+
background-color: #fff;
68+
}
69+
70+
.question-number {
71+
font-size: 18px;
72+
font-weight: bold;
73+
color: #1a73e8;
74+
margin-bottom: 10px;
75+
}
76+
77+
.question-text {
78+
margin-bottom: 15px;
79+
color: #333;
80+
line-height: 1.5;
81+
}
82+
83+
select {
84+
padding: 10px;
85+
border-radius: 4px;
86+
border: 1px solid #ddd;
87+
width: 100px;
88+
font-size: 16px;
89+
}
90+
91+
.action-buttons {
92+
display: flex;
93+
gap: 10px;
94+
flex-wrap: wrap;
95+
justify-content: center;
96+
margin-top: 20px;
97+
}
98+
99+
@media (max-width: 768px) {
100+
button {
101+
width: 100%;
102+
padding: 15px;
103+
}
104+
105+
select {
106+
width: 100%;
107+
}
108+
109+
.container {
110+
padding: 10px;
111+
}
112+
113+
.question-card {
114+
padding: 10px;
115+
}
116+
}
117+
</style>
118+
</head>
119+
<body>
120+
<div class="container">
121+
<div class="input-section">
122+
<h2>Paste JSON Here</h2>
123+
<textarea id="jsonInput" placeholder="Paste your JSON here..."></textarea>
124+
<div class="action-buttons">
125+
<button onclick="loadEditor()">Open Editor</button>
126+
</div>
127+
</div>
128+
129+
<div class="editor" id="editor">
130+
<div id="editorContent"></div>
131+
<div class="action-buttons">
132+
<button onclick="saveCorrections()" id="saveBtn">Save Corrections</button>
133+
<button onclick="copyToClipboard()" id="copyBtn" disabled>Copy to Clipboard</button>
134+
<button onclick="downloadJSON()" id="downloadBtn" disabled>Download JSON</button>
135+
</div>
136+
</div>
137+
</div>
138+
139+
<script>
140+
let originalData = null;
141+
let correctedData = null;
142+
143+
function loadEditor() {
144+
try {
145+
const json = document.getElementById('jsonInput').value;
146+
originalData = JSON.parse(json);
147+
renderEditor();
148+
document.querySelector('.input-section').style.display = 'none';
149+
document.getElementById('editor').style.display = 'block';
150+
} catch (e) {
151+
alert('Invalid JSON format! Please check your input.');
152+
}
153+
}
154+
155+
function renderEditor() {
156+
const editorContent = document.getElementById('editorContent');
157+
editorContent.innerHTML = '';
158+
159+
originalData.question_paper.questions.forEach(question => {
160+
const card = document.createElement('div');
161+
card.className = 'question-card';
162+
163+
card.innerHTML = `
164+
<div class="question-number">Question ${question.question_number}</div>
165+
<div class="question-text">${question.question_text}</div>
166+
<select class="answer-select" data-qnum="${question.question_number}">
167+
${['A', 'B', 'C', 'D', 'X'].map(opt => `
168+
<option value="${opt}" ${question.correct_option === opt ? 'selected' : ''}>
169+
${opt}
170+
</option>
171+
`).join('')}
172+
</select>
173+
`;
174+
175+
editorContent.appendChild(card);
176+
});
177+
}
178+
179+
function saveCorrections() {
180+
correctedData = JSON.parse(JSON.stringify(originalData));
181+
182+
document.querySelectorAll('.answer-select').forEach(select => {
183+
const qnum = parseInt(select.dataset.qnum);
184+
const newValue = select.value;
185+
186+
const question = correctedData.question_paper.questions.find(
187+
q => q.question_number === qnum
188+
);
189+
190+
if (question) {
191+
question.correct_option = newValue;
192+
}
193+
});
194+
195+
document.getElementById('copyBtn').disabled = false;
196+
document.getElementById('downloadBtn').disabled = false;
197+
alert('Corrections saved! Now you can copy or download the JSON.');
198+
}
199+
200+
function copyToClipboard() {
201+
const dataStr = JSON.stringify(correctedData, null, 2);
202+
navigator.clipboard.writeText(dataStr).then(() => {
203+
alert('JSON copied to clipboard!');
204+
}).catch(err => {
205+
alert('Failed to copy to clipboard. Please try again.');
206+
});
207+
}
208+
209+
function downloadJSON() {
210+
const dataStr = JSON.stringify(correctedData, null, 2);
211+
const blob = new Blob([dataStr], { type: 'application/json' });
212+
const url = URL.createObjectURL(blob);
213+
const link = document.createElement('a');
214+
link.href = url;
215+
link.download = `corrected-quiz-${Date.now()}.json`;
216+
document.body.appendChild(link);
217+
link.click();
218+
document.body.removeChild(link);
219+
URL.revokeObjectURL(url);
220+
}
221+
</script>
222+
</body>
223+
</html>

0 commit comments

Comments
 (0)