Need rich text functionality in the quiz/mini-quiz components.

[elPiablo]

At the moment, we don't have any rich text functionality in the quizzes and mini-quizzes. But we are limited to using quotes and back ticks, which is a bit ugly/messy, and it means we can't have good and predictable writing conventions.

Sometimes we need to highlight a piece of code in the questions and possible answers, so that it is quickly identifiable to and easy to differentiate from other text for the learner:
Q. What does the tokenTier mapping do?
A. It maps the token ID to its corresponding tier.
A. It maps tokenTier to the totalSupply.

Sometimes we want to highlight a word, where italics would be appropriate:
Q. What does the term gas refer to in the context of Ethereum?

Sometimes we need text in bold to really stress something.....that we really want to stress.
Q. What is a private key?
A. A key that gives total access to whomever holds it to have full control of an account and its assets

And then we need to agree on when and where to use them (so we can add a footnote to our lesson template guidelines doc)

[Markkos89]

Hi @elPiablo !
This is something needed that involves the development team.
Right now we have the quizzes and mini-quizzes data in a .json format which contains the strings to be shown on each one.
example: https://github.com/Developer-DAO/academy/blob/main/utils/quizzes/lesson-2-quiz.json

So far I didn't found a rich text for strings, the libraries I know are editors, and here comes the big question because this is something that will add value to the project, but we need to figure out what is really needed, how to solve it, and when to do it.

@elPiablo do you have any example to share?

Here is a list of some rich text editors: https://blog.bitsrc.io/top-5-rich-text-editors-for-react-in-2021-628fecf0f7e0

Let's continue the talk and think together the best solution for this.

At first sight, if we use a rich text editor it will need to have it's own page to be used, like a CreateQuizzPage.

Allright! Regards!!

Note: this is not a bug

[briangershon]

Hey @Markkos89 -- check out https://interweave.dev/ -- it's a React component for displaying formatted text, rendering links, etc.

[jamiebones]

Draft.js is also a fantastic rich text editor for React component Draft.js

[elPiablo]

Hey @Markkos89
Sorry for the delay. I need to start realising that Github is a social platform too.
Thanks for getting the conversation underway with this.

[elPiablo]

@elPiablo do you have any example to share?

Hey @Markkos89

Sorry that I have overlooked a lot of things in Github Issues. I need to get in and clean out some cobwebs! 😄

There are a lot of examples of code in questions and answers in this file: https://github.com/Developer-DAO/academy/blob/main/src/utils/quizzes/quiz-lesson-3.json

I know your really busy, and it's a 'nice-to-have', so no pressure for v2