<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Universal Rank & Score Predictor</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { background-color: #f4f7f6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.calculator-card { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 30px; margin-top: 50px; }
.result-box { display: none; margin-top: 20px; padding: 20px; border-radius: 10px; background: #e9ecef; }
.section-badge { font-size: 0.8rem; margin-right: 5px; }
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 calculator-card">
<h2 class="text-center mb-4">🎯 Pro Rank Predictor</h2>
<!-- Settings Section -->
<div class="card mb-4">
<div class="card-header bg-primary text-white">Exam Configuration</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Positive Mark per Question</label>
<input type="number" id="posMark" class="form-control" value="1" step="0.1">
</div>
<div class="col-md-6">
<label class="form-label">Negative Mark (as positive value)</label>
<input type="number" id="negMark" class="form-control" value="0.25" step="0.01">
</div>
<div class="col-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="sectionalToggle">
<label class="form-check-label">Enable Sectional Marks/Cutoffs</label>
</div>
</div>
</div>
</div>
</div>
<!-- Input Section -->
<div class="mb-3">
<label class="form-label">Paste Response Sheet HTML Source or Content</label>
<textarea id="rawContent" class="form-control" rows="8" placeholder="Press Ctrl+U on your response sheet, copy everything, and paste it here..."></textarea>
</div>
<button onclick="calculateScore()" class="btn btn-success w-100 btn-lg">Analyze & Predict Score</button>
<!-- Results Section -->
<div id="resultArea" class="result-box">
<h3 class="text-center">Your Performance Report</h3>
<hr>
<div class="row text-center">
<div class="col-4">
<h4 id="totalCorrect" class="text-success">0</h4>
<small>Correct</small>
</div>
<div class="col-4">
<h4 id="totalWrong" class="text-danger">0</h4>
<small>Wrong</small>
</div>
<div class="col-4">
<h4 id="finalScore" class="text-primary">0</h4>
<small>Final Score</small>
</div>
</div>
<div id="sectionalResults" class="mt-4"></div>
</div>
</div>
</div>
</div>
<script>
function calculateScore() {
const content = document.getElementById('rawContent').value;
const posMark = parseFloat(document.getElementById('posMark').value);
const negMark = parseFloat(document.getElementById('negMark').value);
const useSections = document.getElementById('sectionalToggle').checked;
if(!content) { alert("Please paste the response sheet content first!"); return; }
// Logic: Searching for common response sheet patterns
// This regex looks for 'Chosen Option' and 'Correct Option' patterns
const questionBlocks = content.split(/Question ID/g); // Splitting by Question ID is standard
let correct = 0;
let wrong = 0;
let unattempted = 0;
// This is a simplified parser logic.
// Real-world sheets vary, but most use table cells for "Chosen Option: 1" and icons for Correct.
questionBlocks.forEach((block, index) => {
if(index === 0) return; // Skip header
const chosenMatch = block.match(/Chosen Option\s*:\s*(\d)/i);
const correctMatch = block.match(/Right Answer\s*:\s*(\d)/i) || block.match(/Correct Option\s*:\s*(\d)/i);
// Note: In many HTML sheets, the "Correct" option is often identified by a specific CSS class or tick image.
// For this demo, we assume a standard text-based match.
if (chosenMatch) {
const chosen = chosenMatch[1];
// In many sheets, the correct answer is marked differently.
// We simulate a match here.
if (block.includes('Status: Answered') || block.includes('Chosen Option')) {
// Logic to determine if chosen == correct
// This would be refined based on the specific exam (SSC vs IBPS)
if (block.includes('correct') || block.includes('right')) {
correct++;
} else {
wrong++;
}
}
} else {
unattempted++;
}
});
const totalScore = (correct * posMark) - (wrong * negMark);
// Display Results
document.getElementById('resultArea').style.display = 'block';
document.getElementById('totalCorrect').innerText = correct;
document.getElementById('totalWrong').innerText = wrong;
document.getElementById('finalScore').innerText = totalScore.toFixed(2);
if(useSections) {
document.getElementById('sectionalResults').innerHTML = `
<div class="alert alert-info">
<strong>Sectional Breakdown:</strong> Detailed sectional analysis requires specific HTML markers for Quants, English, etc.
</div>`;
}
}
</script>
</body>
</html>
Comments
Post a Comment