Maison > développement back-end > tutoriel php > 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

王林
Libérer: 2023-09-28 06:00:01
original
1457 Les gens l'ont consulté

Comment ajouter des questions de code et de programmation aux quiz en ligne

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');
});
Copier après la connexion

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">
Copier après la connexion
<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>

上述代码通过嵌入的JavaScript代码创建了一个Ace Editor实例,用于编辑代码。点击“运行代码”按钮后,通过fetch函数发送HTTP POST请求到服务器,并将代码作为JSON数据体发送。服务器返回的运行结果通过修改页面上的<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>

Enfin, nous devons afficher le code et les questions de programmation de la question dans la plateforme de réponse en ligne. Ceci peut être réalisé en intégrant l'éditeur de code et la description du sujet dans la page Web. Voici un exemple de code utilisant Ace Editor et HTML :

rrreee

Le code ci-dessus crée une instance d'Ace Editor via du code JavaScript intégré pour éditer le code. Après avoir cliqué sur le bouton « Exécuter le code », envoyez une requête HTTP POST au serveur via la fonction fetch et envoyez le code sous forme de corps de données JSON. Les résultats d'exécution renvoyés par le serveur sont affichés en modifiant l'élément <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> sur la page. 🎜🎜Ce qui précède est la méthode de mise en œuvre pertinente pour ajouter des questions de code et de programmation aux questions de réponse en ligne. Les développeurs doivent uniquement utiliser les bibliothèques et technologies open source correspondantes en fonction de besoins spécifiques pour mettre en œuvre une plate-forme de réponse aux questions en ligne entièrement fonctionnelle. J'espère que cet article vous aidera ! 🎜

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal