Skip to content

Commit 6c99d13

Browse files
developeranazdeveloperanaz
authored
Update qjc.html
1 parent 23f1858 commit 6c99d13

1 file changed

Lines changed: 105 additions & 136 deletions

File tree

‎webapps/quiz/qjc.html‎

Lines changed: 105 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -3,220 +3,189 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Quiz JSON Corrector</title>
6+
<title>JSON Question Editor</title>
77
<style>
88
body {
99
font-family: Arial, sans-serif;
10-
margin: 20px;
11-
background-color: #f0f2f5;
10+
margin: 0;
11+
padding: 20px;
12+
background-color: #f0f0f0;
1213
}
1314

1415
.container {
15-
max-width: 1200px;
16+
max-width: 1000px;
1617
margin: 0 auto;
1718
}
1819

19-
.input-section {
20-
background: white;
20+
.section {
21+
background-color: white;
2122
padding: 20px;
2223
border-radius: 8px;
23-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
2424
margin-bottom: 20px;
25+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
2526
}
2627

2728
textarea {
2829
width: 100%;
29-
height: 200px;
30-
margin: 10px 0;
30+
height: 300px;
3131
padding: 10px;
32+
margin: 10px 0;
3233
border: 1px solid #ddd;
3334
border-radius: 4px;
34-
box-sizing: border-box;
35+
font-family: monospace;
3536
}
3637

3738
button {
3839
background-color: #4CAF50;
3940
color: white;
40-
padding: 12px 24px;
41+
padding: 10px 20px;
4142
border: none;
4243
border-radius: 4px;
4344
cursor: pointer;
44-
font-size: 16px;
45-
transition: background-color 0.3s;
4645
margin: 5px;
47-
width: 200px;
4846
}
4947

5048
button:hover {
5149
background-color: #45a049;
5250
}
5351

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;
52+
.question-editor {
53+
border: 1px solid #ddd;
6454
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;
55+
margin: 10px 0;
56+
border-radius: 4px;
7557
}
7658

77-
.question-text {
78-
margin-bottom: 15px;
79-
color: #333;
80-
line-height: 1.5;
59+
.choices {
60+
margin: 10px 0;
8161
}
8262

8363
select {
84-
padding: 10px;
85-
border-radius: 4px;
86-
border: 1px solid #ddd;
87-
width: 100px;
88-
font-size: 16px;
64+
padding: 5px;
65+
margin: 5px 0;
8966
}
9067

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;
68+
@media (max-width: 600px) {
69+
textarea {
70+
height: 200px;
10371
}
10472

105-
select {
73+
button {
10674
width: 100%;
107-
}
108-
109-
.container {
110-
padding: 10px;
111-
}
112-
113-
.question-card {
114-
padding: 10px;
75+
margin: 5px 0;
11576
}
11677
}
11778
</style>
11879
</head>
11980
<body>
12081
<div class="container">
121-
<div class="input-section">
122-
<h2>Paste JSON Here</h2>
82+
<div class="section" id="inputSection">
83+
<h2>Input JSON</h2>
12384
<textarea id="jsonInput" placeholder="Paste your JSON here..."></textarea>
124-
<div class="action-buttons">
125-
<button onclick="loadEditor()">Open Editor</button>
126-
</div>
85+
<button onclick="handleEdit()">Edit</button>
12786
</div>
12887

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>
88+
<div class="section" id="editorSection" style="display: none;">
89+
<h2>Edit Questions</h2>
90+
<div id="editorContainer"></div>
91+
<button onclick="generateCorrectedJSON()">Generate</button>
92+
</div>
93+
94+
<div class="section" id="resultSection" style="display: none;">
95+
<h2>Final Output</h2>
96+
<textarea id="output" readonly></textarea>
97+
<button onclick="copyToClipboard()">Copy Code</button>
13698
</div>
13799
</div>
138100

139101
<script>
140102
let originalData = null;
141-
let correctedData = null;
142103

143-
function loadEditor() {
104+
function handleEdit() {
105+
const jsonInput = document.getElementById('jsonInput').value;
144106
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';
107+
originalData = JSON.parse(jsonInput);
108+
buildEditorUI(originalData.question_paper.questions);
109+
document.getElementById('editorSection').style.display = 'block';
110+
document.getElementById('inputSection').style.display = 'none';
150111
} catch (e) {
151-
alert('Invalid JSON format! Please check your input.');
112+
alert('Invalid JSON: ' + e.message);
152113
}
153114
}
154115

155-
function renderEditor() {
156-
const editorContent = document.getElementById('editorContent');
157-
editorContent.innerHTML = '';
116+
function buildEditorUI(questions) {
117+
const editorContainer = document.getElementById('editorContainer');
118+
editorContainer.innerHTML = '';
158119

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>
120+
questions.forEach((question, index) => {
121+
const questionDiv = document.createElement('div');
122+
questionDiv.className = 'question-editor';
123+
124+
questionDiv.innerHTML = `
125+
<h3>Question ${question.question_number}</h3>
126+
<p>${question.question_text}</p>
127+
<div class="choices">
128+
${Object.entries(question.choices).map(([key, value]) => `
129+
<div>${key}: ${value}</div>
171130
`).join('')}
172-
</select>
131+
</div>
132+
<label>Correct Answer:
133+
<select class="correct-option">
134+
${['A', 'B', 'C', 'D', 'X'].map(opt => `
135+
<option value="${opt}" ${opt === question.correct_option ? 'selected' : ''}>
136+
${opt}
137+
</option>
138+
`).join('')}
139+
</select>
140+
</label>
173141
`;
174142

175-
editorContent.appendChild(card);
143+
editorContainer.appendChild(questionDiv);
176144
});
177145
}
178146

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;
147+
async function generateCorrectedJSON() {
148+
const editorQuestions = document.querySelectorAll('.question-editor');
149+
const newQuestions = [];
150+
151+
editorQuestions.forEach((questionDiv, index) => {
152+
const select = questionDiv.querySelector('.correct-option');
153+
const selectedOption = select.value;
154+
155+
if (selectedOption !== 'X') {
156+
const originalQuestion = originalData.question_paper.questions[index];
157+
newQuestions.push({
158+
...originalQuestion,
159+
correct_option: selectedOption
160+
});
192161
}
193162
});
194163

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-
}
164+
originalData.question_paper.questions = newQuestions;
165+
const correctedJSON = JSON.stringify(originalData, null, 2);
199166

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-
});
167+
try {
168+
const response = await fetch('https://raw.githubusercontent.com/developeranaz/developeranaz.github.io/refs/heads/gh-pages/webapps/quiz/KPSC/civil/065_2021/index.html');
169+
const templateText = await response.text();
170+
const finalCode = templateText.replace('PASTE_YOUR_JSON', correctedJSON);
171+
172+
const output = document.getElementById('output');
173+
output.value = finalCode;
174+
document.getElementById('resultSection').style.display = 'block';
175+
document.getElementById('editorSection').style.display = 'none';
176+
} catch (error) {
177+
alert('Error fetching template: ' + error.message);
178+
}
207179
}
208180

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);
181+
async function copyToClipboard() {
182+
const output = document.getElementById('output');
183+
try {
184+
await navigator.clipboard.writeText(output.value);
185+
alert('Copied to clipboard!');
186+
} catch (err) {
187+
alert('Failed to copy: ' + err);
188+
}
220189
}
221190
</script>
222191
</body>

0 commit comments

Comments
 (0)