Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Solution Explanations #15

Merged
merged 15 commits into from
Nov 18, 2021
Merged

Conversation

malerba118
Copy link
Contributor

Alright, this is a pretty big one, so to summarize this:

  • reorganizes the steps required to create a quiz and adds a third step for the explanation
  • allows inline construction of an explanation, composed of a series of steps
  • persists the explanation as a jsonb column on the quizzes table
  • provides a quiztaker view of the explanation
  • preserves state across steps when navigating forward/backward through the quiz creation form
  • hides the show solution button in the case that no solution exists to be backward compatible with quizzes currently in the db that have no solution provided
  • adds a bunch of goodies (hooks/components) to make it easier to work with the editor

Before running this locally be sure to run the new additions to schema.sql against whatever db you're using (sorry that this is not an automated migration, it should be ideally, but not sure it's worth it for a project of this scale)

demo-explanation

@vercel
Copy link

vercel bot commented Nov 18, 2021

@malerba118 is attempting to deploy a commit to the Sliphq Team on Vercel.

A member of the Team first needs to authorize it.

@@ -0,0 +1,91 @@
import React, { FC, HTMLProps, useEffect, useState } from "react";

interface ComplexInputProps<T>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is actually unused now, but i'm kinda tempted just to leave it in cause i think it's powerful. I was using it for manual array input in my first iteration.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool with leavin this in!

@vercel
Copy link

vercel bot commented Nov 18, 2021

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sliphq/truthy-so/B994H4Fxa98FnKiPYzafwNemgXgi
✅ Preview: https://truthy-so-git-fork-malerba118-solution-walkthrough-sliphq.vercel.app

>
{steps[FormStep.Explanation]}
</div>
{/* {steps[formStep]} */}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was originally just conditionally rendering these steps like on line 213 here, but then the state for a step would get blown away if you switched to a different step and came back, so i changed it to just set display none on inactive steps to preserve their state

}

return (
<EditorContext.Provider value={editor}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I created a little wrapper for the Editor so that the Editor can support children and from the children you can call useEditor to get the editor instance.

This enables support for all sort of interesting children components for the editor. For example:

<Editor>
  <LineSelector lines={lines} onChange={setLines} />
<Editor>

<Editor>
  <ContentWidget line={5}>
    <div>some content pinned to line 5</div>
  </ContentWidget>
<Editor>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

love this approach. opens it up for really cool stuff in the future. great thinking :)


select views from quizzes where id = row_id ;
$function$
;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In its current state schema.sql actually fails execution on a fresh db. I had to move these alterations down in the script to a point where the quizzes table has already been created.

@@ -0,0 +1,91 @@
import React, { FC, HTMLProps, useEffect, useState } from "react";

interface ComplexInputProps<T>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool with leavin this in!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants