Heim > Artikel > Backend-Entwicklung > So fügen Sie Code- und Programmierfragen zu Online-Tests hinzu
So fügen Sie Code- und Programmierfragen zu Online-Tests hinzu
- 王林Original
- 2023-09-27 23:03:151370Durchsuche
Um den Code und die Programmierfragen der Frage in die Online-Antwort einzufügen, benötigen Sie spezifische Codebeispiele
Mit der Entwicklung des Internets sind Online-Lernen und Online-Prüfungen zu einem Trend geworden. In Online-Prüfungen sind Programmierfragen ein häufiger Fragetyp. Das Hinzufügen von Fragecodes und das Programmieren von Fragen zur Online-Frage-Antwort-Plattform ist zu einem wichtigen Thema geworden. In diesem Artikel wird anhand spezifischer Codebeispiele beschrieben, wie diese Funktionalität implementiert wird.
Um den Code der Frage in die Online-Frage-Antwort-Plattform einfügen zu können, benötigen wir zunächst ein Framework, das die Codebearbeitung und -ausführung unterstützt. Derzeit ist die Verwendung eines Open-Source-Code-Editors wie Ace Editor oder CodeMirror die beliebteste Wahl. Diese Editoren bieten Funktionen wie Code-Hervorhebung, automatische Vervollständigung und Code-Formatierung und eignen sich hervorragend zum Bearbeiten und Anzeigen von Code in Online-Quiz.
Als nächstes müssen wir das Problem lösen, wie der vom Benutzer eingegebene Code zur Ausführung an den Server übermittelt wird. Eine übliche Methode besteht darin, den vom Benutzer eingegebenen Code zur Verarbeitung über die Backend-Serverschnittstelle an das Backend zu übergeben und die laufenden Ergebnisse zu erhalten. Dies kann durch den Einsatz einer serverseitigen Skriptsprache wie PHP, Python oder Node.js erreicht werden. Hier ist ein Beispielcode mit 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');
});Der obige Code verwendet das Express-Framework, um einen einfachen HTTP-Server zu erstellen, akzeptiert Benutzercode-Übermittlungen über die Route /run und verwendet den child_process Das Modul erstellt untergeordnete Prozesse zum Ausführen von Code. Die Ausführungsergebnisse werden per HTTP-Antwort an den Client zurückgegeben. /run路由接受用户的代码提交，并使用child_process模块创建子进程来执行代码。执行结果通过HTTP响应返回给客户端。
最后，我们需要在在线答题平台中展示题目的代码和程序设计题。这可以通过在网页中嵌入代码编辑器和题目描述的方式实现。下面是一个使用Ace Editor和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>
Das obige ist der detaillierte Inhalt vonSo fügen Sie Code- und Programmierfragen zu Online-Tests hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!