devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ENCOA-107, ENCOA-115 Fixed completion percentage, brought back the line numbers, 'Level Exam' was replaced by 'Placement Test', Next/Back instructions with quotes, 'Submit' on last level question

Browse Source
This commit is contained in:
Carlos Mesquita
2024-08-27 17:08:33 +01:00
parent c464375414
commit 845bccbe2a
7 changed files with 128 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/exams/Level/TextComponent.tsx
View File

@@ -1,5 +1,5 @@
import { LevelPart } from "@/interfaces/exam";
import { useEffect, useRef } from "react";
import { useEffect, useRef, useState } from "react";
interface Props {
part: LevelPart,
@@ -9,78 +9,65 @@ interface Props {
const TextComponent: React.FC<Props> = ({ part, contextWord, setContextWordLine }) => {
const textRef = useRef<HTMLDivElement>(null);
const [lineNumbers, setLineNumbers] = useState<number[]>([]);
const [lineHeight, setLineHeight] = useState<number>(0);
const calculateLineNumbers = () => {
if (textRef.current) {
const computedStyle = window.getComputedStyle(textRef.current);
const lineHeightValue = parseFloat(computedStyle.lineHeight);
const containerWidth = textRef.current.clientWidth;
setLineHeight(lineHeightValue);
const offscreenElement = document.createElement('div');
offscreenElement.style.position = 'absolute';
offscreenElement.style.top = '-9999px';
offscreenElement.style.left = '-9999px';
offscreenElement.style.whiteSpace = 'pre-wrap';
offscreenElement.style.width = `${containerWidth}px`;
offscreenElement.style.font = computedStyle.font;
offscreenElement.style.lineHeight = computedStyle.lineHeight;
offscreenElement.style.whiteSpace = 'pre-wrap';
offscreenElement.style.wordWrap = 'break-word';
offscreenElement.style.textAlign = computedStyle.textAlign as CanvasTextAlign;
const paragraphs = part.context!.split('\n\n');
let currentLine = 1;
let contextWordLine: number | null = null;
const paragraphLineStarts: number[] = [];
paragraphs.forEach((paragraph, pIndex) => {
const p = document.createElement('p');
p.style.margin = '0';
p.style.padding = '0';
paragraph.split(/(\s+)/).forEach((word: string) => {
const span = document.createElement('span');
span.textContent = word;
p.appendChild(span);
});
offscreenElement.appendChild(p);
if (pIndex < paragraphs.length - 1) {
const gap = document.createElement('div');
gap.style.height = '16px'; // gap-4
offscreenElement.appendChild(gap);
}
const textContent = textRef.current.textContent || '';
textContent.split(/(\s+)/).forEach((word: string) => {
const span = document.createElement('span');
span.textContent = word;
offscreenElement.appendChild(span);
});
document.body.appendChild(offscreenElement);
const lines: string[][] = [[]];
let currentLine = 1;
let currentLineTop: number | undefined;
const elements = offscreenElement.querySelectorAll('p, div');
let contextWordLine: number | null = null;
elements.forEach((element) => {
if (element.tagName === 'P') {
const spans = element.querySelectorAll<HTMLSpanElement>('span');
paragraphLineStarts.push(currentLine);
const firstChild = offscreenElement.firstChild as HTMLElement;
if (firstChild) {
currentLineTop = firstChild.getBoundingClientRect().top;
}
spans.forEach(span => {
const rect = span.getBoundingClientRect();
const top = rect.top;
const spans = offscreenElement.querySelectorAll<HTMLSpanElement>('span');
if (currentLineTop === undefined || top > currentLineTop) {
if (currentLineTop !== undefined) {
currentLine++;
}
currentLineTop = top;
}
spans.forEach(span => {
const rect = span.getBoundingClientRect();
const top = rect.top;
if (contextWord && contextWordLine === null && span.textContent?.includes(contextWord)) {
contextWordLine = currentLine;
}
});
} else if (element.tagName === 'DIV') { // Gap
if (currentLineTop !== undefined && top > currentLineTop) {
currentLine++;
currentLineTop = undefined;
currentLineTop = top;
lines.push([]);
}
lines[lines.length - 1].push(span.textContent?.trim() || '');
if (contextWord && contextWordLine === null && span.textContent?.includes(contextWord)) {
contextWordLine = currentLine;
}
});
setLineNumbers(lines.map((_, index) => index + 1));
if (contextWordLine) {
setContextWordLine(contextWordLine);
}
@@ -131,10 +118,15 @@ const TextComponent: React.FC<Props> = ({ part, contextWord, setContextWordLine
return (
<div className="flex mt-2">
<div ref={textRef} className="h-fit ml-2 flex flex-col gap-4">
{part.context!.split('\n\n').map((line, index) => {
return <p key={`line-${index}`}><span className="mr-6">{index + 1}</span>{line}</p>
})}
<div className="flex-shrink-0 w-8 pr-2">
{lineNumbers.map(num => (
<div key={num} className="text-gray-400 flex justify-end" style={{ lineHeight: `${lineHeight}px` }}>
{num}
</div>
))}
</div>
<div ref={textRef} className="h-fit whitespace-pre-wrap ml-2">
<div dangerouslySetInnerHTML={{ __html: part.context! }} />
</div>
</div>
);