Week 1

In de eerste week draaide het voornamelijk om duidelijk in kaart brengen wat het doel van het project was. We hadden de eerste meeting met de opdrachtgever, en hebben van tevoren de case doorgenomen en een debriefing gemaakt. Tijdens het gesprek hebben we deze besproken, en daarna nog aanpassingen gedaan in de debriefing waar nodig.  

Verder heb ik vooral nagedacht over hoe de functionaliteiten die de opdrachtgever wilt zien in de website, met elkaar moeten gaan samenwerken. Om dit duidelijk te krijgen heb ik in een overzicht gezet wat het stappenplan is van de website. Dit omdat het voor ons makkelijker werken is als je een goed beeld hebt van wat er moet gebeuren.

Ook hebben we onderzoek gedaan naar het DISC model en hier vragen van opgesteld. Deze vragen hebben we nodig om de persoonlijkheidstest te gaan coderen.

Week 2

In week 2 ben ik begonnen met het eerste prototype van de DISC persoonlijkheidstest. Dit was een simpel prototype om een idee te krijgen van hoe het uiteindelijk zou moeten werken. Ik ben begonnen met een counter te maken in een EventListener, zodat wanneer een gebruiker een bepaalde waarde selecteert de counter omhoog gaat. Op die manier kan je dan een soort puntensysteem maken, zodat je een uiteindelijke score krijgt hoeveel de 4 categorieën van DISC allemaal bij je passen.

Alleen was het probleem hierbij dat een gebruiker meerdere keren op een button kan drukken, en de counter dan omhoog blijft gaan. En wanneer je bij een vraag op het eerste antwoord klikt en vervolgens op het tweede antwoord telt de counter voor allebei een punt erbij. Hierdoor werkte de persoonlijkheidstest niet goed. Verder had ik een resultatenpagina gemaakt waar je de resultaten van jouw persoonlijkheidstest kon bekijken. Maar omdat op de resultatenpagina de JS opnieuw wordt ingeladen was de counter van puntenD weer op 0. Dus kon je als gebruiker niet jouw resultaten bekijken.

Dit eerste prototype had dus nog veel fouten waardoor de persoonlijkheidstest niet goed werkte. Wel had ik hierdoor al een beter idee van wat voor code ik wel moest gebruiken om het beter te doen. Ik heb in dit eerste prototype voor het eerst met een forEach gewerkt. Dit bleek erg handig, en heb ik ook nodig gehad in de uiteindelijke oplossing. Met de forEach is het mogelijk om op meerdere elementen tegelijk code uit te voeren. In het geval van de persoonlijkheidstest kan ik dan dus alle antwoorden die voor de Dominant categorie gelden selecteren, en hier een EventListener aan mee geven die punten bijtelt voor de eindwaarde van Dominant. Op die manier kan je dan bijhouden hoeveel punten per categorie passen bij de antwoorden van een gebruiker.

Week 3

In week 3 heb ik de tweede versie van de DISC persoonlijkheidstest gemaakt. Hierbij heb ik gekeken naar wat er fout ging in v1 en daar een oplossing op bedacht. In plaats van buttons heb ik nu radio buttons gebruikt. Daardoor kan de gebruiker maar 1 antwoord selecteren. Wel had ik nog het probleem dat wanneer een antwoord was geselecteerd de counter +1 deed. Als je dan een antwoord veranderde klopte de punten niet meer omdat de counter al een punt had opgeteld, en na het veranderen nog een punt voor een andere waarde daar bij optelde. Dit heb ik uiteindelijk kunnen verhelpen door de EventListener niet op een click van de button te zetten, maar op het versturen van het formulier. Hierdoor begint de functie pas met het tellen van de waardes wanneer de gebruiker klaar is met het formulier. Dan kan je als gebruiker zoveel aanpassen als je wilt tijdens de test, zonder dat de resultaten niet meer kloppen. Ook heb ik een required toegevoegd aan de HTML zodat het alleen mogelijk is het formulier te versturen wanneer de gebruiker op alle vragen antwoord heeft gegeven.

Ik heb elk antwoord één of meerdere classes toegewezen, voor de bijbehorende categorie van het DISC model. Vervolgens kan je dan met JS alle input radio selecteren met een class van Dominant Interactief Stabiel of Consciëntieus. Ik had online wat onderzoek gedaan naar hoe ik de persoonlijkheidstest met radio buttons kon maken. Daaruit kwam het .checked element. Hiermee kan je nalopen of een checkbox of radiobutton geselecteerd is door de gebruiker. Door een forEach te gebruiken met .checked kon ik alle radiobuttons nalopen. Vervolgens heb ik een if statement gemaakt voor wanneer de radio button gechecked is, om de counter +1 te geven aan de bijbehorende variabele.

Als laatste worden de resultaten na het versturen van het formulier onder het kopje resultaten weergeven. Wanneer er nog geen resultaten zijn is dit niet zichtbaar, en staat er dat de gebruiker de test eerst volledig moet afmaken.

Verder moeten de resultaten van de vacatures worden gekoppeld aan de persoonlijkheidstest. Hiervoor ben ik begonnen met een prototype van een scanfunctie. Het doel van deze functie is om door de kernwoorden van een vacature te lopen, en dit te matchen met het DISC model. Hiervoor heb ik onderzoek gedaan naar het DISC model en alle relevante kernwoorden in een array gezet. Uiteindelijk heb je dan dus 4 arrays (één van elke DISC categorie), met in elke array de bijpassende kernwoorden. Vervolgens heb ik online onderzoek gedaan naar hoe je een scanfunctie kan maken met JS. Hieruit kwam dat het beste voor mijn concept de .include functie is. Hiermee kan in een array kijken of een string er in voor komt. Dat is ideaal voor mij in gebruik want hiermee kan ik dan in één van de 4 arrays checken of het kernwoord hierin voorkomt, en vervolgens punten toedienen met een if statement.

Vervolgens heb ik een functie geschreven die dus per kernwoord naloopt in welke array hij voorkomt, en dan bij de bijbehorende variable van die array een punt toekent.

Het resultaat hiervan is dat je kernwoorden kan invullen in de inputvelden, en de functie kijkt dan in welke DISC categorie dit behoort, en geeft een aantal punten per overeenkomst van kernwoorden.

Week 4

In week 4 ben ik verder gegaan met het scansysteem voor vacatures. In de v1 kon je kernwoorden invullen die vergeleken werden met kernwoorden uit de arrays van DISC, waar vervolgens punten aan werden toegekend. In v2 ben ik aan de slag gegaan om de kernwoorden uit een vacature te halen, en die te scannen. Ook heb ik onderzoek gedaan naar wat voor kernwoorden bij bepaalde vacatures horen. Hiervoor heb ik op meerdere sites vacatures bekeken, en gekeken naar hoe zij de functie omschrijven, en wat voor eisen ze aan werknemers stellen. In v2 worden de kernwoorden uit een vacature gehaald door een queryselector.innerHTML. Vervolgens wordt er per vacature 4 nieuwe variabele aangemaakt met de punten per DISC categorie. Dit is wat je uiteindelijk nodig heb om de vacatures te koppelen aan de resultaten van de persoonlijkheidstest.

Opgelost:

• Scannen van een vacature op kernwoorden
• Puntensysteem per DISC categorie
• Per vacature 4 variabele met punten van de DISC categorieën

Probleempunten:

• Handmatig per vacature de functie moeten aanpassen

Deze versie is een stap in de goede richting, alleen moet ik nu per vacature handmatig een nieuwe variabele aanmaken, en de queryselector aanpassen. Het is niet gelukt om dit automatisch te laten doen.

Ook heb ik deze week een codereview gedaan met Robert waar ik dit probleem heb besproken. Hierin hebben we het erover gehad hoe ik het nu heb aangepakt, en wat een betere oplossing zou zijn.

Probleem:

• Koppelen van vacatures aan resultaten DISC test

Oplossing:

• JSON gebruiken en een algoritme schrijven die vacatures matcht, en vervolgens de best passende vacature terug geeft.

Hoe ga je dit aanpakken:

• Begin met een stuk of 10 echte vacatures in een website te zetten (vacatures gehaald uit een website gegeven door de opdrachtgever). Vervolgens moet je daarvan alle kernwoorden door een systeem halen die weet bij welke DISC categorie ze horen. De vervolg stap is dan om te kunnen sorteren op waardes van hoeverre ze overeenkomen met één van de categorieën uit het DISC model. Hierbij is het belangrijk om te zorgen dat alle vacatures in een duidelijke, en eenduidige structuur zijn opgebouwd van HTML. Hierdoor kan je later met JS een goed systeem bouwen dat alle vacatures naloopt, maar dan moeten de kernwoorden constant op dezelfde plek in de HTML staan van een vacature.

Aan de hand van deze codereview ben ik verder gegaan met het v3 systeem dat kernwoorden scant uit vacatures en punten toekent adhv het DISC model. Hierin heb ik geprobeerd een functie te schrijven die automatisch alle kernwoorden uit de vacatures kan scannen. Zodat je niet handmatig code hoeft aan te passen, en alle nieuwe toegevoegde vacatures ook door de functie worden gescand. Het is gelukt om een functie te schrijven die alle kernwoorden van elke vacature naloopt, en punten toekent. Dit is gelukt door een forEach die bij elke vacature de kernwoorden pakt. Vervolgens een forEach die op elk van die kernwoorden de textcontent bekijkt, en vergelijkt met de array kernwoordenDominant. Per matchend kernwoorden telt de counter +1 bij de variabele puntenDominant. Deze functie zou ik dan nog 3x kunnen kopiëren en de waardes aanpassen voor Interactief Stabiel en Consciëntieus. Het enige wat ik dan hoef aan te passen is dat hij de kernwoorden checkt met de array van kernwoordenInteractief, kernwoordenStabiel of kernwoordenConsciëntieus.

Opgelost:

• Niks handmatig invullen
• Alle vacatures worden gescand op kernwoorden en gematcht
• Per DISC categorie wordt een variabele bijgehouden met punten om te kijken in welke categorie een vacature het best past.

Probleem: Er wordt niet per vacature een losse variabele aangemaakt. Er is een algemene counter die alle vacatures bekijkt. Er is dan dus ook een algemene variabele die doortelt, en niet per vacature een variabele met max 3 punten. (Er zijn 3 kernwoorden per vacature, dus de maximale match met een DISC categorie is 3 punten.)

Hierdoor is het ook niet mogelijk om te sorteren. Daarvoor heb je per vacature een aantal punten nodig en niet een algemene variabele. Om dit probleem te demonstreren heb ik de variabele puntenD (match met Dominant) in de titel van de vacatures gezet. De eerste vacature bevat 2 kernwoorden van Dominant, en de 3de en 4de vacature bevatten allebei 1 kernwoord van Dominant. Zoals te zien in de afbeelding hieronder wordt er niet bij de eerste 2 neergezet, en bij de 2de en 3de allebei 1.

Verder kregen we deze week van onze opdrachtgever te horen dat ze besloten hebben om het product te gaan testen op een specifieke doelgroep. Ze willen op de BioTech sector gaan testen of het concept van deze vacaturebank een succes is. Hiervoor heb ik dus de vacatures aangepast naar de BioTech sector, en de stijl van de website. Ook heb ik de persoonlijkheidstest in dezelfde stijl gemaakt.

Week 5

Deze week ben ik begonnen met een codereview met Julian. Hierin hebben wij de zoekfunctie besproken die ik heb geschreven.

Probleem:

• Het probleem was een goed werkende zoekfunctie bouwen waarmee je kan zoeken op de titels van vacatures. Het was mij gelukt om content uit de zoekbalk te matchen met de h2 (titel) van een vacature. Alleen nog niet om specifieke vacatures niet te laten zien wanneer de zoekopdracht niet overeenkwam. Ik had een if statement gebruikt waarbij er een display'none' CSS class werd toegevoegd wanneer de zoekbalk value niet overeenkwam. Alleen werd dit niet voor specifieke vacatures gedaan, maar werden alle vacatures dan niet meer zichtbaar.

Oplossing:

• De oplossing is om te zorgen dat de er niet een algemene if statement is die niet passende resultaten verbergt. Hierdoor worden dan alle vacatures niet zichtbaar. Hoe ik het eerst had was een forEach met een if statement om te kijken of de content overeenkomt met de titel van een vacature. Alleen door de manier hoe ik de forEach had gecodeerd werden dus aan alle vacatures een classlist.Add('none') toegevoegd.

Hoe ga ik dit doen:

• De juiste manier is dus om in de forEach op de parameter (vacature) een if statement mee te geven. Je hide alle vacatures automatisch, en gebruikt dan classlist.remove om de matchende vacatures wel te laten zien. Door gebruik te maken van .include kan je kijken of content overeenkomt met de titel van een vacature.

Eerst maakte ik gebruik van een .trim waardoor alle tekst in vacatures werd nagekeken op de zoekbalk.value. Alleen bleek dit achteraf niet handig omdat er veel irrelevante resultaten uitkwamen omdat er veel tekst in de beschrijving van vacatures staat. Daarom heb ik de zoekfunctie toen aangepast om alleen op de h2 (titel) van een vacature te zoeken. Op die manier krijgt de gebruiker alleen relevante content te zien na het zoeken.

Ook ben ik deze week bezig geweest om het werk van mij en Emile van de afgelopen weken een geheel te laten worden. We hebben onze pagina's samengevoegd en aan elkaar gelinkt. Emile was bezig met de backend functionaliteiten zoals de database. Ik heb aan de pagina's van emile styling toegevoegd in de BioTech stijl, en al onze pagina's aangepast zodat ze volledig responsive zijn. We hadden met Koop een bespreking, en die wees ons er op dat een vacature site vaak op verschillende apparaten bezocht zal worden. Het is dus erg belangrijk om zowel op mobiel, als op tablet en desktop de website te kunnen bekijken. Dit kostte me uiteindelijk nog best wat tijd, maar het is wel goed gelukt. Verder heb ik bij een aantal pagina's nog een 0-state toegevoegd, zodat de gebruiker goed begrijpt wat het doel van de website is.

Log in pagina

Register pagina

Home pagina

Detail pagina vacatures

DISC test pagina

Profiel pagina

Verder heb ik contact met de opdrachtgever gehad over de functionaliteit van vacatures koppelen met de DISC test. Dit is het enige wat niet helemaal is gelukt. De opdrachtgever gaf aan een programmeur te kennen, en die te willen inschakelen om deze functionaliteit af te maken. Daarvoor heb ik een document gemaakt in het engels met uitleg van mijn code, en waar de probleempunten zitten in de functionaliteit.