Developer-DAO / academy-turbo

D_D Academy is an open-source education platform created by and for Developer DAO.
https://academy.developerdao.com
MIT License
18 stars 11 forks source link

Feature: Social share when completing lesson quiz #235

Open kempsterrrr opened 6 months ago

kempsterrrr commented 6 months ago

We need to update the quiz modal flow for a customisable success message and a social share button that prompts the user to click a Twitter Intent link that pre-populates a tweet to post to celebrate completing the lesson.

Here is the current user journey:

  1. Click the button to open the quiz
  2. Complete questions and hit submit
  3. If questions are correct, the modal closes and the user is shown a toast message to say they've completed the lesson

NB - the use is not shown a success modal. The success modal (below) is only shown if the user clicks the Quiz button a second time

Success Modal image

Here is the update flow we need to implement to deliver on the requirement for AR.IO course:

  1. Click the button to open the quiz
  2. Complete questions and hit submit
  3. If questions are correct, the success modal (above) is shown with a customisable success message and a share to Twitter button

image

Why show the modal vs just the toast? Showing the modal after completing the quiz gives us a much better opportunity to communicate with the user that they have:

a) complete the quiz b) any instructions on what to do next, such as share to Twitter or, as in AR's case, claim their points on Zealy.

Why customisable message? For our campaign with AR.IO, they are releasing Quests on their Zealy platform. When users complete the lesson, we must give them specific instructions on completing the Zealy quest.

What is a Twitter Intent link This is a link that, when a user clicks it, will open the tweet compose view with a tweet that is pre-populated with text we define for them. These are easily created using something like - https://www.sharelinkgenerator.com/

Here is an example - https://twitter.com/intent/tweet?text=I%20just%20completed%20the%20Arweave%20XXX%20lesson%20by%20%40ar_io_network%20on%20%40devdao_academy%0A%0AURL%20OF%20LESSON