Skip to content

Commit

Permalink
Use new lesson library
Browse files Browse the repository at this point in the history
  • Loading branch information
alizarazot committed May 27, 2024
1 parent 7be65ca commit 7af86d2
Show file tree
Hide file tree
Showing 8 changed files with 105 additions and 189 deletions.
4 changes: 1 addition & 3 deletions public/lesson/index.json
Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
{
"lesson-1": []
}
["lesson-1"]
4 changes: 2 additions & 2 deletions public/lesson/lesson-1.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"description": "¡Pon a prueba tus conocimientos de Lengua de Señas Colombiana!",
"questions": {
"q-1": {
"lesson": [
"information": [
{
"type": "title",
"content": "Prueba diagnóstica de Lengua de Señas Colombiana (LSC)"
Expand All @@ -22,7 +22,7 @@
"correct": 3
},
"q-2": {
"lesson": [
"information": [
{
"type": "title",
"content": "Prueba diagnóstica de Lengua de Señas Colombiana (LSC)"
Expand Down
8 changes: 1 addition & 7 deletions src/component/single-choice-question.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,7 @@ export class ComponentSingleChoiceQuestion extends LitElement {
return false;
}

if (
(
this.shadowRoot?.querySelectorAll("igc-radio")[
this._lastRadio
] as IgcRadioComponent
).innerText === this.question.correct
) {
if (this._lastRadio === this.question.correct) {
return true;
}

Expand Down
124 changes: 34 additions & 90 deletions src/lesson/index.ts
Original file line number Diff line number Diff line change
@@ -1,127 +1,71 @@
const rootDirectory = location.origin + "/lesson";
const rootIndex = rootDirectory + "/index.json";
const rootIndex = `${rootDirectory}/index.json`;

export class LessonMetadata {
export class Lesson {
constructor(
private readonly _id: string,
public readonly name: string,
public readonly require: LessonMetadata[],
public readonly description: string,
public readonly questions: Map<string, Question>,
) {}

async load(): Promise<LessonData> {
const rawLesson = await LessonMetadata.rawLessonDetails(this._id);

return new LessonData(
rawLesson.title,
rawLesson.description,
rawLesson.summary,
LessonMetadata.parseQuestions(rawLesson.questions),
);
}

protected static async rawLessonDetails(id: string): Promise<any> {
return await (await fetch(rootDirectory + "/" + id + "/index.json")).json();
}

protected static parseQuestions(questions: any): Question[] {
let parsedQuestions: Question[] = [];

for (let question in questions) {
parsedQuestions.push(Question.parse(questions[question]));
}

return parsedQuestions;
}
}

export class LessonData {
export class Question {
constructor(
public readonly title: string,
public readonly description: string,
public readonly questions: Question[],
public readonly information: Information[],
public readonly question: string,
public readonly answers: string[],
public readonly correct: number,
) {}

static parse(question: any): Question {
return new Question(
Information.parseList(question.lesson),
question.question,
question.answers,
question.correct,
);
}
}

export class LessonContent {
export class Information {
constructor(
public readonly type: "title" | "paragraph" | "image",
public readonly content: string,
) {}

static parse(content: any): LessonContent {
static parse(content: any): Information {
if (content.type === "image") {
return new LessonContent(
return new Information(
content.type,
rootDirectory + "/image/" + content.content,
`${rootDirectory}/image/${content.content}`,
);
}

return new LessonContent(content.type, content.content);
return new Information(content.type, content.content);
}

static parseList(content: any): LessonContent[] {
let parsedContent: LessonContent[] = [];
static parseList(content: any): Information[] {
let parsedContent: Information[] = [];

for (let c of content) {
parsedContent.push(LessonContent.parse(c));
parsedContent.push(Information.parse(c));
}

return parsedContent;
}
}

export class Question {
constructor(
public readonly lesson: LessonContent[],
public readonly question: string,
public readonly answers: string[],
private readonly _indexCorrect: number,
) {}

get correct(): string {
return this.answers[this._indexCorrect];
}

static parse(question: any): Question {
return new Question(
LessonContent.parseList(question.lesson),
question.question,
question.answers,
question.correct,
);
}
}

export async function avaibleLessons(): Promise<Map<string, LessonMetadata>> {
const lessonIndex = await (await fetch(rootIndex)).json();

let lessons = new Map<string, LessonMetadata>();

for (let rawLesson of lessonIndex) {
let require = parseLessonRequeriments(rawLesson.require, lessons);

lessons.set(
rawLesson.id,
new LessonMetadata(rawLesson.id, rawLesson.name, require),
);
}

return lessons;
export async function avaibleLessons(): Promise<string[]> {
return await (await fetch(rootIndex)).json();
}

function parseLessonRequeriments(
require: string[],
lessons: Map<string, LessonMetadata>,
): LessonMetadata[] {
let requeriments: LessonMetadata[] = [];
export async function loadLesson(id: string): Promise<Lesson> {
const lesson = await (await fetch(`${rootDirectory}/${id}.json`)).json();
lesson.questions = new Map(Object.entries(lesson.questions));

for (let req of require) {
for (let [id, lesson] of lessons) {
if (req === id) {
requeriments.push(lesson);
}
}
for (let [_, question] of lesson.questions) {
question.information = Information.parseList(question.information);
}

return requeriments;
return lesson;
}
6 changes: 1 addition & 5 deletions src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,7 @@ export class MainComponent extends LitElement {
render: (params) =>
html`<view-lesson lessonId=${params["id"]!}></view-lesson>`,
enter: async (params) => {
if ((await avaibleLessons()).get(params["id"]!) != null) {
return true;
}

return false;
return (await avaibleLessons()).includes(params["id"]!);
},
},
]);
Expand Down
100 changes: 40 additions & 60 deletions src/view/home.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { LitElement, css, html } from "lit";
import { LitElement, css, html, type TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators.js";

import {
Expand All @@ -8,7 +8,7 @@ import {
IgcDialogComponent,
} from "igniteui-webcomponents";

import { LessonData, LessonMetadata, avaibleLessons } from "lesson";
import { Lesson, avaibleLessons, loadLesson } from "lesson";
import { currentSession } from "session";

import type { PartialNavDrawer } from "./partial/nav-drawer";
Expand Down Expand Up @@ -50,26 +50,19 @@ export class ViewHome extends LitElement {
defineComponents(IgcDialogComponent, IgcCardComponent, IgcButtonComponent);

avaibleLessons().then((lessons) => {
this._lessonsMetadata = lessons;

for (let [id] of this._lessonsMetadata) {
this._lessonsMetadata
.get(id)!
.load()
.then((lesson) => {
this._lessonsData.set(id, lesson);
this.requestUpdate();
});
for (let id of lessons) {
loadLesson(id).then((lesson) => {
this._lessons.set(id, lesson);
this.requestUpdate();
});
}
});

this.loadTotalScore();
}

@state()
private _lessonsMetadata = new Map<string, LessonMetadata>();
@state()
private _lessonsData = new Map<string, LessonData>();
private _lessons = new Map<string, Lesson>();

@state()
private _session = currentSession();
Expand All @@ -81,14 +74,15 @@ export class ViewHome extends LitElement {
private _navDrawer!: PartialNavDrawer;

override render() {
if (this._lessonsData.size === 0) {
if (this._lessons.size === 0) {
return html`Loading...`;
}

const lessonsId: string[] = [];
for (let [id] of this._lessonsMetadata) {
const lessons = new Map<string, Lesson>();

for (let [id, lesson] of this._lessons) {
if (this._session.getPoints(id) <= 75) {
lessonsId.push(id);
lessons.set(id, lesson);
}
}

Expand All @@ -106,51 +100,37 @@ export class ViewHome extends LitElement {
<h2 slot="title">Puntos totales: ${this.totalScore}</h2>
</igc-card-header>
</igc-card>
${lessonsId.map(
(id) => html`
<igc-card>
<igc-card-header>
<h2 slot="title">${this._lessonsMetadata.get(id)!.name}</h2>
<h3 slot="subtitle">${this._lessonsData.get(id)!.title}</h3>
</igc-card-header>
<igc-card-content>
<p>${this._lessonsData.get(id)!.description}</p>
</igc-card-content>
<igc-card-actions>
<igc-button
slot="start"
@click=${() => {
this._startLesson(id);
}}
>Comenzar</igc-button
>
<igc-button
slot="end"
@click=${() => {
this._showLessonDescription(this._lessonsData.get(id)!);
}}
>Previsualizar</igc-button
>
</igc-card-actions>
</igc-card>
`,
)}
${(() => {
const render = new Array<TemplateResult>();
for (let [id, lesson] of lessons) {
render.push(html`
<igc-card>
<igc-card-header>
<h2 slot="title">${lesson.name}</h2>
</igc-card-header>
<igc-card-content>
<p>${lesson.description}</p>
</igc-card-content>
<igc-card-actions>
<igc-button
slot="start"
@click=${() => {
this._startLesson(id);
}}
>Comenzar</igc-button
>
</igc-card-actions>
</igc-card>
`);
}
return render;
})()}
</div>
<igc-dialog title="Descripción">
<p>Por hacer...</p>
</igc-dialog>
`;
}

@query("igc-dialog", true)
private _dialog!: IgcDialogComponent;

private _showLessonDescription(lesson: LessonData) {
this._dialog.innerHTML = `<p>${lesson.summary}</p>`;
this._dialog.show();
}

private _startLesson(id: string) {
this.dispatchEvent(
new CustomEvent("goto-url", {
Expand Down
Loading

0 comments on commit 7af86d2

Please sign in to comment.