zorazrr / activ-card Goto Github PK

Currently, we do not have any functionality for teachers to create sets from scratch.

To get started:

• Visit medium.tsx
• Create an empty set on click of button
• Take id of newly created set and re-direct to the new [id].tsx page after click

If this issue becomes too big, feel free to segment and break it into more issues per page/flow

Description

Right now, the pomodoro break is hardcoded to display after 3 cards. We want it to show up every x cards, and we want to make sure that it does not "replace" showing one of the cards and the student can study all cards (instead of displaying the 4th card, it currently just displays the canvas).

Additionally, users can press the back button and take their pomodoro break again. Ensure that if users press the "back" button, they cannot go back to a break.

Todos

• Fix pomodoro break rendering logic to avoid "replacing" cards
  • This will likely fix being able to take breaks again
• Render pomodoro break every x cards
• Fix back button to avoid letting users take breaks again

Useful links

• activ-card/src/pages/set/[id].tsx

  Line 54 in cf036f0

  {curIndex >= 3 && curIndex < 4 ? (

Also redesign this area to look like following:
https://www.youtube.com/watch?v=uRvb1IUXvTM

Right now, this doesn't work properly and seems to be somehow connected to the browser cache and Toriis?

This relates to being able to edit cards once they are created.

Developers should do the following:

• [Frontend] Edit button on sets on teacher dashboard should point to [id].tsx page for cards
• [Fullstack] Edits to cards actually propagate and are changed in backend through API call

Teachers should be able to configure options when creating a set.

Developer will need to do the following:

• Think of all configuration options needed
• Edit DB schema to account for options
• Enable options flow on frontend and connect through API
• Would be nice if on the frontend, some of these options dynamically render based on what is selected (if Pomodoro is enabled, then we show how many cards to break between, otherwise we don't)

Here are a few option suggestions to get started:

• Enable speech-to-text or typed response (both enabled by default)
• Interleaving sets
• MATCH BY MATCH vs own words
• Pomodoro on or off
• If pomodoro on, then break per how many cards? how long break?
• If incorrect, read by mic before being able to move on
• Spaced repetition

Set Configuration Options:

Purpose of the set (Help us to grade):

• Inverted Classroom (checked on effort, they filled something reasonable out)
• Assignment (regular standard checking and understanding)
• Literacy (match by match + disable writing)
• Theory (open-ended questions, give an example of monarchy in history...)

Creation Options:
Enable Review?

• Interleave Set (Make sure they only merge similar types, nvm we can get set id from card and see its og configs)

• Select as many as sets (percentage of each set)

• Consider if it's confusing for kid to see different types of cards (maybe tag them)

• Spaced Repetition

Enable Focus?

• Pomodoro

In the future:

• Make some of these per card configs

This is a pretty large feature but designing backend to hold metrics (maybe as fields in SetProgress) and then displaying some elementary functionality on FE of metrics page.

Modify existing dashboard page to conditionally render based on if the user role is a student or teacher, mock off of Figma designs

Currently, students cannot simply review the term and definition. They have to answer each card.

The flow when creating flashcards from uploading worksheets should be reworked to model the following steps:

1. User clicks button to create from worksheets
2. File upload modal shows up
3. User attaches file and presses done
4. User is re-directed to newly created set page

Right now, this flow is being interrupted by the addition of a generate card modal that shows up and remains while the user uploads the file.

Description

Right now, the grant permission text button is always displayed, even after the user clicks on it and has microphone permissions enabled.

Todos

• Only display text if microphone permissions aren't enabled
• Prompt user to enable microphone permissions if they click on speak if not enabled (ideal behavior, stretch goal)
• Look into caching permissions (stretch goal and might not be possible on various browsers due to privacy)

Useful links

• https://stackoverflow.com/questions/65488195/is-there-a-way-to-detect-the-browser-permissionsspecifically-camera-and-mic-in

Screenshots

Before microphone access is enabled:

After microphone access is enabled (notice text is still there):

Teacher should be able to add classrooms

Description

Right now, image prompting during the Pomodoro break returns abstract art, but we want it to mirror what the user has drawn a bit better. We'll rework our pipeline for image prompting and generation. We'll ask ChatGPT to describe the input image, generate an image based off the description, and return the image to the user.

Todos

• Implement image generation workflow: Image → “Describe this image to me” → ChatGPT Output → “Generate an image with this description” → Image (sticker)
• Test to make sure that images generated are child-friendly
• Be sure to pass image into backend from frontend without any intermediate save state.

Useful links

• https://platform.openai.com/docs/guides/vision
• https://platform.openai.com/docs/guides/images/introduction?context=node

Description

Right now, AI grading mostly considers the term instead of the definition. This means teachers using flashcards in more flexible ways, where the definition may have some abstract relationship to the term (i.e. perhaps order matching, where the definition is some number describing what step the term is in a process) will not be properly graded.

Example:
Term: "Permafrost", Definition: "One", Answer: "One", Grade Result: "Incorrect", Expected Result: "Correct"

Additionally, grading is picky and not explicit / properly guiding the student to the correct answer. This can be seen in the screenshot below. It also could be giving more helpful and pointed feedback than what it currently does right now when the user gets it wrong.

Getting started:
To avoid costs, test your prompting on ChatGPT Web Interface before testing your changes in our app.
src/server/api/routers/gpt.ts: checkAnswer, explainAnswer

Todos

• Make AI grading take the teacher's definition into greater account
• Make sure the AI is not picky / giving the student the right feedback
• Make sure AI is giving readable, helpful and formatted feedback to students (specifically showing what parts of answer they missed or what was wrong)
• Creating prompts that are extensible to many concepts but niche enough to match our use case
• Testing prompt engineering with various subjects in school
• Explore multi-language support
• Excuse mistakes in spelling and grammar and assume meaning of misspelled words based on context of everything else --> this makes sure we focus on checking content

Screenshots

Description

There is no way for users to navigate to the dashboard from the study page other than by navigating to the right URL or pressing the back button. There are no designs for this.

Todos

• Add a home / back / dashboard button to take users back to the dashboard

Related Issues

• #35

Screenshots

Allow terms to just be recordings
Allow text to be read out loud through a play button

Should be done on [id].tsx page, imagining a delete icon on each card.

Right now, everyone sees the same data when on dashboard. Should see things based on how they are logged in.

Right now, on homepage, the typewriter text loops but when it's set to a one-time animation, it offsets to another position on the screen, disrupting the smooth animation flow. Let's fix this!

Need to actually display the students in a classroom on teacher's dashboard

• Maybe have radio buttons with the following options
• Questions, prompting higher level thinking
• Inverted Classroom (Prep for next day lesson)
• Grammar help
• Literacy

In the future, outside of just AI creation, we should create flows before the current creation page that has options like:

• I'm doing inverted classroom
• I'm doing content review
• I'm doing literacy
• I'm doing high level thinking and making qs more open response (Bloom's)

Anywhere where data is being loaded from API calls, add spinners.

Cool Spinners:
https://css-loaders.com/shapes/
https://www.sliderrevolution.com/resources/css-loaders/

Currently, our prompt engineering is not as robust as it could be when comparing user answers with defined answers on the flashcards. It also could be giving more helpful and pointed feedback than what it currently does right now when the user gets it wrong.

This issue requires spending a lot of time interfacing with ChatGPT to see how we can prompt it in a manner that gives us the level of clarity and correctness we expect.

Dev on this feature is responsible for:

• Creating prompts that are extensible to many concepts but niche enough to match our use case
• Testing prompt engineering with various subjects in school
• Explore multi-language support
• Excuse mistakes in spelling and grammar and assume meaning of misspelled words based on context of everything else --> this makes sure we focus on checking content
• Have some kind of default responses to the user for any type of inappropriate responses and also a special tag on API response back such as "FLAG" --> later on we can use "FLAG" to escalate any inappropriate responses to the teacher

Getting started:
To avoid costs, test your prompting on ChatGPT Web Interface before testing your changes in our app.
src/server/api/routers/gpt.ts: checkAnswer, explainAnswer

Regen class code to join students later on (after initial class creation and code). Would have to basically update the class code in the backend and check that nothing with the class code already exists

On Edit/Create Set

• Converting "Got It" to Thumbs Up/Check Icon (maybe it's green or a diff color)

• Converting mic button to conditionally show blue mic or red square for stop

• Color Scheme @vasuchal

• Card scroll on dashboard kinda bleeds into sets (tablist)

• Typing text animation on home page

• Buttons should be hoverable on set study page

• Fix padding on input for Set Name (so either make text inside smaller or make input box more spaced cuz text is getting cut off/very close to cut off)

• Back/Cancel button on create set page that leads you back to dashboard (ff to copy design/color of button in deleteToast, its like kinda light gray or smth)

• Make Set Name input required

• When they are creating a set, there should already be one card ready for them to fill out rather than having them click add card everytime

On Dashboard

• Classes should be titled on sidebar

On Add Class Modal (for Teacher)

• Style Modal Appropriately

On Join Class Modal (for Student)

• Style Modal Appropriately

Set Component on Dashboard

• Maybe put "x cards" tag under description or play around with this for best arrangement (commented out description for now)

Dashboard Tabs

• Make tab components scrollable rather than whole dashboard (so gives illusion of fixed dashboard)

Overall

• Use Chakra Theme everywhere

Badge Component

• Fix submit flow and modal styling with save image button and loading spinner
• Add spinner after save is selected
• In draw mode when badge is being created have like a cute glow generated behind it so it looks cool and animated (https://stackoverflow.com/questions/34821217/easily-create-an-animated-glow)

** On Canvas**

• Add better colors
• Add a progress bar/loader animation fidget (something more exciting or kid friendly) for when image generating loads
• Let's wait five seconds after the timer to avoid buggy behavior and then auto submit and disable canvas after time is done

** After Canvas**

• Style "Return Home" and "Return to Set" better

Toast Component on Study Mode

• Give encouraging compliments when they get it right
• When they get it wrong also like "so close"
• Style home button at the top (use logo with Home)
• Make badges more front and center (more gratifying) or just let them stay for like a second and fade or we can do both

Going back on arrows behavior

• Rendering is finnicky

Change SetCard Color

• It looks weird

** On Set Study**

• Spinner should be centered

• Home button on side should be styled

• Title on set study made bigger and more styled

• Rethink colors of buttons and flow

• Move progress bar back up make it fat and rectangular with a little bit of border radius (kind of like how our flashcard and input box look and its width should span exactly those two boxes), can you also try different colors like purple or green to make it stand out?

• Maybe we reformat button styling to how Gabriel recommended?

• First try for set study is not showing loader for audio recording

• Think about when the buttons show up? Only show up to revisit old cards but don't let you move on to new cards... mayb just get rid of the back and next buttons unless in passive mode later on?

• Getting the answer wrong should put the card back in the set automatically.

• Maybe add "got it" button and push back into deck for AI feedback

• Congratulate for finishing set and like show all the badges earned during session (STRETCH)

• Clicking enter when studying should automatically submit it

• Wonder how audio case should be handled cuz students should be able to edit their definition but also clicking submit seems like a hassle everytime after but removing auto would b good in case the audio picks up any wrong word detections hmmm idk

• Can still record and re-do their answers after they get them wrong because audio button is not disabled (behaviors for when they get wrong or dk, should disable from submitting again only like click got it or like auto flip (us) the card and see the answer)

• [nvm] Progress bar should be same width as card and input text

• When user get's the answer correct, we should still flip the card over and show the answer

• Style "That is correct" and "That is incorrect" with more encouraging messages

• When they press "I don't Know" right now it's good check button is grayed out but the speak button isn't so they can still technically bypass and j read the correct answer to get through the card.

• Some kind of loader while it's processing or capturing answer (especially for long answers) or should show the words as they speak.

• Fix this end screen:

Description

Right now, if students aren't sure of their answer, there is no way for them to indicate this and come back to study the card. We want them to be able to indicate that they would like to add this card to the back of their deck if they don't know. There are no existing designs for this.

Todos

• Show the right answer when the user clicks on the "Review Again" button --> card flips to the right answers
• Same button will move the card later in the deck to re-study ("I don't know," "Study again," or some similar text)

Useful Links

• https://faqs.ankiweb.net/what-spaced-repetition-algorithm.html
  • Later on, we can use spaced repetition to achieve this

Screenshots

A place for user to be able to delete their account and edit any profile-related settings. Need to also design this while devving, probably also need to add API calls and edit schemas.

Description

Right now, the user is redirected to the first classroom on the teacher dashboard after creating a set

Todos

• Redirect the teacher to the classroom the set was created in

When teachers click edit sets, should be able to edit set config somehow

Figure out how to do this through sending a custom link, keep security in mind (people shouldn't be able to mock or recreate links to join classrooms)

Should also thoroughly test student dashboard conditional rendering after this

Make sure student gets linked to teacher as well

Description

At the moment, there's not a big indicator of whether the user is recording their speech or not other than the text changing to "Stop." Add an animation, like a recording button flickering on and off, when recording.

Also lowkey if we can change how permissions works right now to have the stream set on the useEffect every time the page changes, that would just be cleaner. Vasu worked on the initial run so if someone else gets this issue, can ask her

Todos

• Add recording animation to the speech-to-text recording button

Useful links

• https://stackoverflow.com/questions/30125705/css-how-to-make-an-element-fade-in-and-then-fade-out

Screenshots

This relates to when we create sets using AI. We need more wrappers and prompting around this option. For instance, right now, if you say "help me learn animals in Spanish" it doesn't comprehend what that means properly. Let's see if we can add some more wrapping to understand what is possible and what isn't.

Developers for this feature should:

• Investigate the bounds of ChatGPT's reactivity in this context (i.e. what's the most we can do with this and where is the hard stop) --> Share this in the PR!
• Add any appropriate wrappers and share any contributions
• Please spend a decent chunk of time on this PR!

Suggestion (optional): If no additional prompting is added, for a tangible outcome, create a folder "GPT Limitations" on this repo attaching your findings as a PDF/ReadME

Teachers should be able to delete sets from dashboard, if possible have a toast pop up as confirmation before allowing them to delete to add some friction in case they accidentally click it.

Description

When the user finishes a set, there is no redirection to the home page or to restart the set. Create a celebration component / page that allows the user to go to their dashboard or restart the set.

Todos

• Create a celebration component / page that allows the user to go to their dashboard or restart the set (and handle any set progress state accordingly)
  • We might need to discuss how exactly we handle set progress in this case
• Display component / page when the user finishes their set

Related Issues

• #36

Screenshots

Description

Teachers should be able to create draft sets that only they can view while creating sets

Todos

• Add visibility to sets

Description

When creating a set, adding cards is only implemented on the frontend, and the set is not updated in the DB.

Todos

• Update the set of cards on set creation
  • Discuss if automatic saving is worth the time investment and how to optimally do this

Useful links

• vercel/next.js#12348

Description

Currently, the site is only in English. Add translations for all static text on the site. We don't have designs for internationalization, so the styling and placement of the button is up to you.

Todos

• Add dropdown or icon for translations to header (and potentially the footer of the landing page)
• Translate landing page
• Translate dashboard
• Translate set creation page
• Translate set page (not the cards)
• Translate pomodoro page

Useful links

• https://react.i18next.com/latest/usetranslation-hook
• https://www.figma.com/file/NmP6r9rMYcnWbKqp7klBOZ/ActiveCard?type=design&node-id=49-93&mode=design&t=996r1fvyHFAeo3Mf-0

Description

Instead of a numerical count of where the user is at in their set when studying, display a progress bar somewhere on the page. This has not been designed yet, so it is up to you.

Todos

• Add a progress bar displaying set progress when the user is at
  • It may be helpful to look at the Metrics page to see where the progress bar has been styled before to standardize styling

Useful links

• [https://github.com/zorazrr/activ-card/blob/cf036f081481e50795d887c11480ed881b6fcffc/src/components/Progress/ProgressBar.tsx#L3](Progress Bar Component)
  • This might be too thick for the progress bar on the set page, but I've added this in case you'd like to reuse the component
• https://chakra-ui.com/docs/components/progress

Screenshots

Description

The pomodoro timer does nothing when it reaches 0 at the moment. Automatically submit what the student has drawn once the timer reaches 0.

Remember to account for the edge case of a user not having drawn anything (a white canvas). Do we want to render a random badge in this case?

Todos

• Automatically submit what the student has drawn once the timer reaches 0
• Handle any edge cases

Useful links

• activ-card/src/components/Canvas.tsx

  Line 85 in cf036f0

  setDataURL(canvasRef.current.getDataURL());

Screenshots

• Involves saving images to database, creating GET endpoint, and displaying on FE for student
• Also allow student, on the modal image is generated, to either choose add badge to gallery or discard badge
• If storing images in DB, use bin data to save space rather than base64 (https://stackoverflow.com/questions/21776563/storing-data-url-in-mongo-db)
• I think this feature should be actually changed into a general class gallery for each class and students can filter by their own badges through a dropdown

Description

Even if there is not a previous/next card, the back and next buttons are rendered.

Todos

• Conditionally render back and next buttons based on if there is a previous/next flashcard

Useful links

• activ-card/src/pages/set/[id].tsx

  Line 92 in cf036f0

  Back

Screenshots