Hoe om 'n koderingstoetsplatform te bou met Node.js

Blog

Hoe om 'n koderingstoetsplatform te bou met Node.js

Hoe om 'n koderingstoetsplatform te bou met Node.js

Koderingstoetse word deesdae deur meer en meer ondernemings gebruik tydens die werwing van sagteware -ontwikkelaars. Webwerwe soos HackerRank , Kodiliteit , ens., help maatskappye om hierdie toetse te administreer en die kandidate te beoordeel op grond van die prestasie van hul kode wanneer dit teen sommige toetsgevalle uitgevoer word.



In hierdie artikel sal ek beskryf hoe u 'n eenvoudige webtoepassing bou vir die toediening van 'n koderingstoets. Die webprogram bied gebruikers 'n probleem, stel die gebruiker in staat om hul oplossing in te dien, voer die oplossing uit op vooraf gedefinieerde toetsgevalle en gee die resultate aan die gebruiker.

Ons werk saam met Express.js vir die web -back -end, terwyl Python die taaloplossings sal wees.



Die opstel van die verhoog

Ons begin met die skep van die gebruikerskoppelvlak, wat bestaan ​​uit 'n vraagarea en 'n koderingsarea.

Om dit te doen, sal ons eers twee div -elemente vir elke gebied skep. Dan sal ons hulle styl:



jp morgan sagteware -ingenieurswese virtuele ervaring

QUESTION

def solution(arr):

Vervolgens styl ons die twee afdelings:

.question, .code-area { padding: 25px; display: table-cell; width: 50%; } .question { text-align: left; position: absolute; top: 0vh; } .code-area { border-left: 2px solid navy; }

In die bogenoemde CSS maak ons ​​die tafelselle van die twee afdelings (sodat hulle langs mekaar kan wees). Ons moet 'n tafel hê om dit te bevat. Hiervoor sal ons 'n bevattende div skep:

... ...

En dan sal ons dit styl:

.container { display: table; height: 95vh; width: 95vw; }

Ons sal ook 'n paar stilering by die | _+_ | voeg element om die agtergrondkleur en lettertipe te verander:

body

Vroeër het ons 'n | _+_ | element waarvan die standaardteks | _+_ |. Kom ons gee dit | _+_ | 'n klas en ID:

body { background-color: aliceblue; text-align: center; font-size: 16pt; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; }

Kom ons skep ook 'n | _+_ | element vir die uitvoer van toetse en 'n | _+_ | element vir die resultate:

textarea

Kom ons voeg nou 'n paar stilering by die elemente:

def solution(arr):

Dit sluit ons werk aan die ontwerp van die gebruikerskoppelvlak af. Die webblad lyk nou so:

Dit is beeldtitel

Die gebruikerskoppelvlak

Voorbereiding van die agterkant

Aan die ander kant van die webtoepassing begin ons met die invoer van die nodige biblioteke:

textarea

Ons benodig:

  • | _+_ | om ons te help met ons POST -versoeke
  • | _+_ | vir kruis-oorsprong versoeke
  • | _+_ |, | _+_ |, en | _+_ | vir die uitvoering van die gebruiker se kode -oplossing
  • | _+_ |, duidelik.

Vervolgens sal ons 'n Express -toepassing skep en dit instel om die afhanklikes wat ons benodig, te gebruik:

def solution(arr):

En ten slotte stel ons die eindpunte op en laat die app luister na poort 5000:

facebook soektog werk nie
button

Ons het twee eindpunte hierbo:

  • | _+_ |: om die voorkant en
  • | _+_ |: om die gebruiker se kode te toets.

Die | _+_ | eindpunt noem die funksie | _+_ | wanneer besoek. Hierdie funksie skryf die gebruiker se kode na 'n Python -lêer en voer dan 'n ander Python -script uit om die kode te toets:

span

In die kode hierbo, die kode wat die gebruiker invoer - wat gestuur sal word as 'n versoekparameter genaamd | _+_ | vanaf die voorkant - sal gestoor word in 'n lêer met die naam | _+_ |, dan die Python -skrif | _+_ | sal uitgevoer word met behulp van Node's | _+_ | funksie (wat 'n konsole -opdrag uitvoer, wag op die uitset en dit terugstuur). Dan word die uitvoer van die script na die voorkant gestuur.

Hier is wat die | _+_ | skrif bevat:

... def solution(arr):

RUN TESTS

...

Dit bevat drie funksies:

  • | _+_ |: om die toetsgevalle waarmee die gebruiker se kode uitgevoer kan word, te kry
  • | _+_ |: om die verwagte uitset vir elke toetsgeval te kry
  • | _+_ |: om die oplossing van die gebruiker aan die toetsgevalle te toets

Kom ons vul hierdie funksies in:

.input, #results { height: 60%; } .input { border: 1px solid gray; width: 90%; font-family: monospace; font-size: 12pt; padding: 10px; } button { width: 150px; height: 50px; cursor: pointer; background-color: lightgreen; color: white; font-weight: bolder; }

Hierdie eerste twee funksies bied ons die invoer en afvoer van 'n paar voorbeeldtoetsgevalle. Hulle benoem ook die toetsgevalle | _+_ | en | _+_ | vir identifikasie.

Kom ons gebruik dit nou in die derde funksie om die gebruiker se kode te toets:

const bodyParser = require('body-parser'); const cors = require('cors'); const execSync = require('child_process').execSync; const express = require('express'); const fs = require('fs'); const path = require('path');

Met die kode hierbo, kyk ons ​​na elke toetsgeval, skakel die gebruiker se oplossing op die invoer van die toetsgeval en vergelyk die resultaat van die gebruiker met die verwagte resultaat.

As die resultate dieselfde is, voeg ons een by tot die aantal toetssake wat geslaag is; anders voeg ons die etiket van die mislukte toetskas by 'n skikking.

gemiddelde vind my selfoon sms

Laastens druk ons ​​die aantal geslaagde toetse af, en as daar foute is, druk ons ​​die etikette daarvan. Let op dat die gebruiker se kode 'n funksie moet heet | _+_ |, wat via 'n skikking vir elke toetsgeval deurgegee moet word en 'n nommer moet teruggee.

Hiermee is die agterkant voltooi.

Verbind die twee ente

Ons volgende taak is om die voorkant aan die agterkant te koppel.

Om dit te doen, sal ons 'n JavaScript -funksie skep wat elke keer as die gebruiker op die | _+_ | klik knoppie. Hierdie funksie stuur die gebruiker se kode na die agterkant en vertoon die gebruiker se resultate.

body-parser

Die funksie kry eers die gebruikerskode van die | _+_ | met die ID | _+_ |, dan gebruik dit AJAX om 'n versoek aan die agterkant se | _+_ | eindpunt. As dit dan 'n antwoord ontvang, stel dit die resultate in die | _+_ | met ID | _+_ |.

Kom ons voeg hierdie gebeurtenishanteerder by die | _+_ | knoppie:

cors

Toets die aansoek

Om die webtoepassing te toets, laat ons 'n eenvoudige vraag by die vraaggebied voeg:

child_process

Die vraag vra die gebruiker eenvoudig om die grootste getal in 'n skikking te vind. Hier is 'n oplossing vir die probleem:

fs

Die oplossing gee die eerste element in die skikking terug (wat duidelik verkeerd is). Klik op die | _+_ | knoppie gee ons hierdie:

Dit is beeldtitel

Toets met 'n verkeerde oplossing

Die toetsresultate vertel ons dat die oplossing verkeerd is, aangesien dit nie in enige toets geval slaag nie. Dit sê ook dat die name van die toetssake die gebruiker nie kon help om hul kode behoorlik aan te pas nie.

Kom ons probeer nou met die volgende kode:

verander die e -poswagwoord van bellsouth
path

Hierdie oplossing loop deur die skikking en kyk watter item die grootste is deur elke element te vergelyk met die voorheen bekende grootste element. Dit is waarskynlik 'n korrekte oplossing, maar laat ons dit toets om te bevestig:

Dit is beeldtitel

Toets met die korrekte oplossing

Die kode het beide toetsgevalle geslaag! Ons webtoepassing vir koderingstoets werk soos verwag.

Dankie dat u tot dusver gevolg het. U kan die volledige kode vir die webtoepassing vind in my GitHub -bewaarplek .

#nodejs #javascript