Rumah > pembangunan bahagian belakang > tutorial php > Cara menambah soalan kod dan pengaturcaraan pada kuiz dalam talian

Cara menambah soalan kod dan pengaturcaraan pada kuiz dalam talian

王林
Lepaskan: 2023-09-28 06:00:01
asal
1457 orang telah melayarinya

Cara menambah soalan kod dan pengaturcaraan pada kuiz dalam talian

Bagaimana untuk menambah kod dan soalan pengaturcaraan soalan dalam jawapan dalam talian, anda memerlukan contoh kod khusus

Dengan perkembangan Internet, pembelajaran dalam talian dan peperiksaan dalam talian telah menjadi trend. Dalam peperiksaan dalam talian, soalan pengaturcaraan adalah jenis soalan biasa. Cara menambah kod soalan dan soalan pengaturcaraan ke platform menjawab soalan dalam talian telah menjadi isu penting. Artikel ini akan menerangkan cara melaksanakan fungsi ini melalui contoh kod tertentu.

Pertama sekali, untuk dapat menambah kod soalan dalam platform menjawab soalan dalam talian, kami memerlukan rangka kerja yang menyokong penyuntingan dan berjalan kod. Pada masa ini, pilihan yang lebih popular ialah menggunakan editor kod sumber terbuka, seperti Editor Ace atau CodeMirror. Editor ini menyediakan fungsi seperti penyerlahan kod, pelengkapan automatik dan pemformatan kod, dan sangat sesuai untuk mengedit dan memaparkan kod dalam kuiz dalam talian.

Seterusnya, kita perlu menyelesaikan masalah bagaimana untuk menghantar kod yang dimasukkan oleh pengguna kepada pelayan untuk dijalankan. Kaedah biasa ialah menghantar kod yang dimasukkan oleh pengguna ke bahagian belakang untuk diproses melalui antara muka pelayan bahagian belakang dan mendapatkan hasil yang sedang berjalan. Ini boleh dicapai dengan menggunakan bahasa skrip sebelah pelayan seperti PHP, Python atau Node.js. Berikut ialah contoh kod menggunakan 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');
});
Salin selepas log masuk

Kod di atas menggunakan rangka kerja Express untuk mencipta pelayan HTTP mudah, menerima penyerahan kod pengguna melalui laluan /run dan menggunakan child_process Modul mencipta proses anak untuk melaksanakan kod. Keputusan pelaksanaan dikembalikan kepada klien melalui respons 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">
Salin selepas log masuk
<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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div>

Akhir sekali, kami perlu memaparkan kod dan soalan pengaturcaraan soalan dalam platform menjawab dalam talian. Ini boleh dicapai dengan membenamkan editor kod dan penerangan topik dalam halaman web. Berikut ialah contoh kod menggunakan Ace Editor dan HTML:

rrreee

Kod di atas mencipta contoh Ace Editor melalui kod JavaScript terbenam untuk kod pengeditan. Selepas mengklik butang "Jalankan Kod", hantar permintaan HTTP POST ke pelayan melalui fungsi fetch dan hantar kod sebagai badan data JSON. Keputusan berjalan yang dikembalikan oleh pelayan dipaparkan dengan mengubah suai elemen <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">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> pada halaman. 🎜🎜Di atas ialah kaedah pelaksanaan yang berkaitan untuk menambah kod dan soalan pengaturcaraan kepada soalan jawapan dalam talian. Pembangun hanya perlu menggunakan perpustakaan dan teknologi sumber terbuka yang sepadan mengikut keperluan khusus untuk melaksanakan platform menjawab soalan dalam talian yang berfungsi sepenuhnya. Harap artikel ini membantu anda! 🎜

Atas ialah kandungan terperinci Cara menambah soalan kod dan pengaturcaraan pada kuiz dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Cadangan popular
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan