Creating a Computer-Based Test (CBT) app involves multiple components including the frontend (HTML,
CSS, JavaScript), backend (Node.js with Express), and a database (MongoDB). Below is a basic example of
how you can set up a CBT app.
1. Set Up the Project
Create a new folder for your project.
Open the folder in Visual Studio Code.
Initialize a new Node.js project by running the following command in the terminal:
bash
Copy code
npm init -y
2. Install Required Packages
bash
Copy code
npm install express mongoose body-parser ejs
3. Create Project Structure
lua
Copy code
project-folder/
|-- views/
| |-- index.ejs
| |-- result.ejs
|-- public/
| |-- styles.css
|-- routes/
| |-- index.js
|-- models/
| |-- question.js
|-- app.js
|-- package.json
4. Backend Code (Node.js with Express)
app.js
javascript
Copy code
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const app = express();
// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/cbtApp', { useNewUrlParser: true, useUnifiedTopology:
true });
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
// Import routes
const indexRoutes = require('./routes/index');
app.use('/', indexRoutes);
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
models/question.js
javascript
Copy code
const mongoose = require('mongoose');
const questionSchema = new mongoose.Schema({
question: String,
options: [String],
answer: Number
});
module.exports = mongoose.model('Question', questionSchema);
routes/index.js
javascript
Copy code
const express = require('express');
const router = express.Router();
const Question = require('../models/question');
router.get('/', async (req, res) => {
const questions = await Question.find({});
res.render('index', { questions: questions });
});
router.post('/submit', async (req, res) => {
const questions = await Question.find({});
let score = 0;
questions.forEach((question, index) => {
if (parseInt(req.body[`question${index + 1}`]) === question.answer) {
score++;
});
res.render('result', { score: score, total: questions.length });
});
module.exports = router;
5. Frontend Code (HTML, CSS, EJS)
views/index.ejs
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CBT App</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<h1>Computer-Based Test</h1>
<form action="/submit" method="post">
<% questions.forEach((question, index) => { %>
<div class="question">
<h2><%= question.question %></h2>
<% question.options.forEach((option, optIndex) => { %>
<div>
<input type="radio" name="question<%= index + 1 %>" value="<%= optIndex %>">
<label><%= option %></label>
</div>
<% }); %>
</div>
<% }); %>
<button type="submit">Submit</button>
</form>
</body>
</html>
views/result.ejs
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CBT App - Result</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<h1>Test Result</h1>
<p>You scored <%= score %> out of <%= total %></p>
<a href="/">Take the test again</a>
</body>
</html>
public/styles.css
css
Copy code
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
background-color: #f4f4f4;
h1 {
background-color: #333;
color: white;
padding: 1em 0;
.question {
background: white;
margin: 1em;
padding: 1em;
border: 1px solid #ddd;
display: inline-block;
width: 300px;
text-align: left;
button {
background: #28a745;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
button:hover {
background: #218838;
6. Adding Sample Questions
You can add sample questions to your MongoDB database using a script or a database GUI like
MongoDB Compass.
Example script to add questions:
javascript
Copy code
const mongoose = require('mongoose');
const Question = require('./models/question');
mongoose.connect('mongodb://localhost:27017/cbtApp', { useNewUrlParser: true, useUnifiedTopology:
true });
const questions = [
question: 'What is the capital of France?',
options: ['Paris', 'London', 'Berlin', 'Madrid'],
answer: 0
},
question: 'What is 2 + 2?',
options: ['3', '4', '5', '6'],
answer: 1
];
questions.forEach(async (q) => {
await Question.create(q);
});
console.log('Questions added successfully!');
mongoose.connection.close();
Running the Project
Ensure MongoDB is running.
Start the server:
bash
Copy code
node app.js
Open your browser and navigate to http://localhost:3000.
This is a basic example to get you started. You can expand this project by adding user authentication,
more complex question types, timers, and better styling.
