zorazrr / activ-card Goto Github PK
View Code? Open in Web Editor NEWTreeHacks AI-powered active learning tool
TreeHacks AI-powered active learning tool
Currently, we do not have any functionality for teachers to create sets from scratch.
To get started:
medium.tsx
If this issue becomes too big, feel free to segment and break it into more issues per page/flow
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.
activ-card/src/pages/set/[id].tsx
Line 54 in cf036f0
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:
Teachers should be able to configure options when creating a set.
Developer will need to do the following:
Here are a few option suggestions to get started:
Set Configuration Options:
Purpose of the set (Help us to grade):
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?
In the future:
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:
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.
Right now, the grant permission text button is always displayed, even after the user clicks on it and has microphone permissions enabled.
Before microphone access is enabled:
After microphone access is enabled (notice text is still there):
Teacher should be able to add classrooms
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.
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
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
In the future, outside of just AI creation, we should create flows before the current creation page that has options like:
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:
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
On Add Class Modal (for Teacher)
On Join Class Modal (for Student)
Set Component on Dashboard
Dashboard Tabs
Overall
Badge Component
** On Canvas**
** After Canvas**
Toast Component on Study Mode
Going back on arrows behavior
Change SetCard Color
** 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:
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.
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.
Right now, the user is redirected to the first classroom on the teacher dashboard after creating a set
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
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
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:
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.
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.
Teachers should be able to create draft sets that only they can view while creating sets
When creating a set, adding cards is only implemented on the frontend, and the set is not updated in the DB.
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.
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.
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?
activ-card/src/components/Canvas.tsx
Line 85 in cf036f0
Even if there is not a previous/next card, the back and next buttons are rendered.
activ-card/src/pages/set/[id].tsx
Line 92 in cf036f0
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.