Home > Article > Backend Development > How to add code and programming questions to online quizzes
How to add code and programming questions to online quizzes
- 王林Original
- 2023-09-27 23:03:151370browse
How to add the code and programming questions of the question in the online answer question, you need specific code examples
With the development of the Internet, online learning and online examinations have become a a trend. In online exams, programming questions are a common type of question. How to add question codes and programming questions to the online question answering platform has become an important issue. This article will describe how to implement this functionality through specific code examples.
First of all, in order to be able to add the code of the question in the online question answering platform, we need a framework that supports code editing and running. Currently, the more popular choice is to use an open source code editor, such as Ace Editor or CodeMirror. These editors provide functions such as code highlighting, auto-completion, and code formatting, and are very suitable for editing and displaying code in online quizzes.
Next, we need to solve the problem of how to submit the code entered by the user to the server for running. A common method is to pass the code entered by the user to the backend for processing through the backend server interface and obtain the running results. This can be achieved by using a server-side scripting language such as PHP, Python or Node.js. Here is a sample code using Node.js:
// 引入依赖库
const express = require('express');
const bodyParser = require('body-parser');
const { spawn } = require('child_process');
// 创建Express应用
const app = express();
// 配置body-parser中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// 处理POST请求
app.post('/run', (req, res) => {
// 获取用户输入的代码
const code = req.body.code;
// 创建子进程来执行代码
const childProcess = spawn('python', ['-c', code]);
// 监听子进程的输出
childProcess.stdout.on('data', (data) => {
// 将输出返回给客户端
res.send(data.toString());
});
// 监听子进程的错误输出
childProcess.stderr.on('data', (data) => {
// 将错误信息返回给客户端
res.status(500).send(data.toString());
});
});
// 启动服务器
app.listen(3000, () => {
console.log('Server is running on port 3000');
});The above code uses the Express framework to create a simple HTTP server, accepts user code submissions through the /run route, and uses child_processThe module creates a child process to execute code. The execution results are returned to the client via HTTP response.
Finally, we need to display the code and programming questions of the question in the online question answering platform. This can be achieved by embedding the code editor and topic description in the web page. The following is a sample code using Ace Editor and HTML:
<!DOCTYPE html>
<html>
<head>
<title>在线答题</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
</head>
<body>
<div>
<h2>程序设计题</h2>
<p>请编写一个程序，输出从1到n之间所有的素数。</p>
<div id="editor" style="width: 500px; height: 300px;"></div>
<button onclick="runCode()">运行代码</button>
<pre id="output">
<script>
// 创建编辑器实例
const editor = ace.edit('editor');
editor.setTheme('ace/theme/twilight');
editor.getSession().setMode('ace/mode/python');
// 运行代码
function runCode() {
const code = editor.getValue();
// 发送请求
fetch('/run', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ code }),
})
.then(response => response.text())
.then(output => {
// 显示运行结果
document.getElementById('output').textContent = output;
})
.catch(error => {
console.error(error);
alert('运行出错');
});
}
</script>
The above is the detailed content of How to add code and programming questions to online quizzes. For more information, please follow other related articles on the PHP Chinese website!