NEED ADVICE ON CREATING PROGRESS SAVER/TRACKER

The only way to understand the following conversation is by creating a free account at headspace.com and interacting with whats going on.

Once logged in, you are presented with what looks like a timeline(see image), each button represents a day in the learning.. when you click on it, a video popup appears, when the video finishes you are redirected to a full screen overlay where audio plays. When audio finishes you are brought back to the main page where it now shows what you just went through is complete and now you can go to the next session.

Questions:

2.) So far, I have been able to create the images and the onmouseover, but not sure how to make popup with a video appear when clicked

3.) Lets pretend with your help I could accomplish that, then the next step would be that when the user closes the popup they are redirected to a page with an audio file on it that the user can play and pause.

4.) After the audio ends, the user would close the page and be brought back to(see image), now the next session is available.

5.) If I log out and log back in my progress is saved so I dont have to watch and listen to what I already have, just have to move forward.

I understand if I want this functionality then most likely I would need to hire someone to create this.. where would I go to get this started?

Are there any plugins out there that could help me with some of this? Are there any developers that could help me write a job description for this type of project?

Thanks in advance for taking your time to help me on this.

EJ

  • Rupok

    Hi EJ,

    Thanks for asking. From your total description, I'm pretty much sure you will need to hire a developer as this involves some advanced functionality like storing sessions. But let me give you some idea regarding your requirements:

    not sure how to make popup with a video appear when clicked

    I believe, this will help you much in achieving this: http://stackoverflow.com/a/13183713/2808424

    when the user closes the popup they are redirected to a page with an audio file on it that the user can play and pause

    This link will give you idea regarding how you can redirect to another page when a popup/modal is closed: http://stackoverflow.com/a/11087196/2808424

    For audio playback, there are lots of beautiful HTML5 based audio player libraries available:
    https://osvaldas.info/audio-player-responsive-and-touch-friendly
    https://amazingaudioplayer.com/
    https://kolber.github.io/audiojs/
    http://jplayer.org/
    https://wavesurfer-js.org/

    After the audio ends, the user would close the page and be brought back to(see image), now the next session is available

    This is gonna be very critical. Because, at this step, you have to close the video popup when the video finishes (you created a post yesterday where I provided you some resources on how you can detect the end of a video and redirect), and then save this information (that this lesson is completed) somewhere in your database, or cookies (depending on your architecture), and then change page element in some way that the next session becomes available. As this involves multiple steps of work and each depending on how the previous step was completed, I could not find any example. I'm really afraid, you will need to hire a dev for this.

    If I log out and log back in my progress is saved so I dont have to watch and listen to what I already have, just have to move forward

    As I described above, this will be a complex part of your project and should be done carefully and might require a developer if you are not very expert with coding in different languages.

    The project description looks good to me, I mean the description you provided here should be good enough for any developer. And you can always hire a developer from our Jobs Section. Please keep in mind, developers found in our Jobs Section are not associated with us in any way. So communicate with them well before you make any payments to them.

    Please let us know if you have any further inquiry. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.