Maison > Article > développement back-end > Comment ajouter des questions de code et de programmation aux quiz en ligne
Comment ajouter des questions de code et de programmation aux quiz en ligne
- 王林original
- 2023-09-27 23:03:151368parcourir
Comment ajouter le code et les questions de programmation de la question dans la réponse en ligne, vous avez besoin d'exemples de code spécifiques
Avec le développement d'Internet, l'apprentissage en ligne et les examens en ligne sont devenus une tendance. Dans les examens en ligne, les questions de programmation sont un type de question courant. Comment ajouter des codes de questions et des questions de programmation à la plateforme de réponses aux questions en ligne est devenu une question importante. Cet article décrira comment implémenter cette fonctionnalité à travers des exemples de code spécifiques.
Tout d'abord, afin de pouvoir ajouter le code de la question dans la plateforme de réponse aux questions en ligne, nous avons besoin d'un framework qui prend en charge l'édition et l'exécution du code. Actuellement, le choix le plus populaire consiste à utiliser un éditeur de code open source, tel que Ace Editor ou CodeMirror. Ces éditeurs fournissent des fonctions telles que la mise en évidence du code, la saisie semi-automatique et le formatage du code, et sont très adaptés à l'édition et à l'affichage du code dans les quiz en ligne.
Ensuite, nous devons résoudre le problème de savoir comment soumettre le code saisi par l'utilisateur au serveur pour exécution. Une méthode courante consiste à transmettre le code saisi par l'utilisateur au backend pour traitement via l'interface du serveur backend et obtenir les résultats d'exécution. Ceci peut être réalisé en utilisant un langage de script côté serveur tel que PHP, Python ou Node.js. Voici un exemple de code utilisant 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');
});Le code ci-dessus utilise le framework Express pour créer un serveur HTTP simple, accepte les soumissions de code utilisateur via la route /run et utilise le child_process Le module crée des processus enfants pour exécuter du code. Les résultats de l'exécution sont renvoyés au client via une réponse HTTP. /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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!