[x] Adjust timeline workflow via query strings

[amberreeves]

Laurie says There was a miscommunication on the needs for the timeline, and I’m hoping you can advise on how best to get the timeline to function as needed. The timeline displays on the site four times.

1. The user should be able to complete the first timeline. She should not be able to access the second and third timeline.
2. The user should be able to complete the second timeline, and is able to see the expanded first timeline. She should not be able to access the third timeline.
3. The user should be able to complete the third timeline, and is able to see the expanded first and second timelines.
4. The user is able to see the fully expanded versions of all three timelines.

This sounds like what we intended and what was happening pre-delivery. I'm not sure is this is what is happening on their end and she's saying it's incorrect, or if this is not happening on their end and she's saying it should. I'll ask her and post more info here when I have it.

[amberreeves]

More from Laurie

• Page A has a link to timeline 1: the user can open and complete the first timeline, but timeline second and third can never be opened on this page.
• Page B has a link to timeline 2: the user can see the first timeline, can open and complete the second, but can never open the third on this page
• Page C has a link to timeline 3: the user can see the first and second timeline, and can open and complete the third timeline.
• Page D has a link to timeline 4: the user can see the entire timeline

From me Yes, I understand. We just need a unique URL for each phase of the timeline interactive so that you can link the subsequent lesson pages directly. So when a user completes a timeline section, and goes back to the next lesson page, there is a link on that next lesson page that leads to back to the timeline in the state that it was when they left off.

[mtedeschi]

When you come to the page, it checks for a querystring. Follow the list below. We'll also need to set the URL for the "Back to Module" button on the timeline completion overlay and the NMAI menu back-button based on which one you're in.

http://nmai.interactivemechanics.com/nk360/2-timeline/ Page A has a link to timeline 1: the user can open and complete the first timeline, but timeline second and third can never be opened on this page.

http://nmai.interactivemechanics.com/nk360/2-timeline/?era=1 Page B has a link to timeline 2: the user can see the first timeline, can open and complete the second, but can never open the third on this page.

http://nmai.interactivemechanics.com/nk360/2-timeline/?era=2 Page C has a link to timeline 3: the user can see the first and second timeline, and can open and complete the third timeline.

http://nmai.interactivemechanics.com/nk360/2-timeline/?era=3 Page D has a link to timeline 4: the user can see the entire timeline.

---

What are the URLs for Page A, B, C, and D so we can plug them into the interactive's back buttons.

[amberreeves]

Page A: http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars-tactics/index.html Page B: http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars/backlash.cshtml Page C: http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars/justice.cshtml Page D: http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars/index.cshtml#summative

[cahdeemer]

In order for this solution to work, the client will need to set a parameter on the URL that has this format ?era=[x]. Examples:

http://www.example.com/?era=1 this is where era 1 says "Start My Timeline" and era 2 and 3 are disabled

http://www.example.com/?era=2 this is where era 1 says "View My Timeline," era 2 says "Start My Timeline," and era 3 is disabled

http://www.example.com/?era=3 this is where era 1 and era 2 say "View My Timeline" and era 3 says "Start My Timeline"

http://www.example.com/?era=4 _this is where eras 1, 2, and 3 say "View My Timeline"

!!! Please note !!! Currently an era parameter is being set programmatically so that I could do the work and so that it can be tested, but this code will need to be removed prior to deployment.

Code to be removed is line 67 in init.js: updateURL(2). This is the first line of the isSelectionScreen function.

[amberreeves]

lovely. @mtedeschi after this is deployed, can you please send instructions in an update email to Laurie?

[mtedeschi]

I'll test and deploy.

[mtedeschi]

@cahdeemer can you remove the test code from the repository/init.js? I should be able to properly test using the querystrings on the URL on the staging site after that, yes?

[cahdeemer]

@mtedeschi: i removed the test code. please let me know if you have any questions about this.

[cahdeemer]

the idea is that you have to have the ?era=[x] at the end of the URL

[mtedeschi]

Two adjustments:

http://nmai.interactivemechanics.com/nk360/2-timeline/?era=1 Page A has a link to timeline 1: the user can open and complete the first timeline, but timeline second and third can never be opened on this page. Should link to: http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars-tactics/index.html

http://nmai.interactivemechanics.com/nk360/2-timeline/?era=2 Page B has a link to timeline 2: the user can see the first timeline, can open and complete the second, but can never open the third on this page. Should link to: http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars/backlash.cshtml

http://nmai.interactivemechanics.com/nk360/2-timeline/?era=3 Page C has a link to timeline 3: the user can see the first and second timeline, and can open and complete the third timeline. Should link to: http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars/justice.cshtml

http://nmai.interactivemechanics.com/nk360/2-timeline/?era=4 Page D has a link to timeline 4: the user can see the entire timeline. Should link to: http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars/index.cshtml#summative

right now, ?era=1 goes to backlash, not to the first tactics/index.html

---

And, instead of this: $(‘a[title=“Return to American Indian Removal Lesson”]’).attr(‘href’, lessonPlan2);

can you put an ID on that anchor and use that instead of the title to set the href? They’ll need to change that title and it’s going to break

[mtedeschi]

There is disagreement about the way this is set up compared to the client's request. The following scenarios have been sent to the client for approval or adjustment before making additional changes:

---

Scenario 1 (Era 1): User comes in from Page A (http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars-tactics/index.html) using ?era=1. They see “Start this Timeline” on era 1, and eras 2 and 3 are grayed out. User is able to navigate back to Page A via the header navigation at any point. Once complete, the Back to Module button links to Page A. If the user clicks the home button, they see “View this Timeline” on era 1, and eras 2 and 3 are still grayed out.

Scenario 2 (Era 2): User comes in from Page B (http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars/backlash.cshtml) using ?era=2. They see “Start this Timeline” on era 2, “View this timeline” on era 1, and era 3 is grayed out. User is able to navigate back to Page B via the header navigation at any point. Once complete, the Back to Module button links to Page B. If the user clicks the home button, they see “View this Timeline” on era 1 and 2, and era 3 is grayed out.

Scenario 3 (Era 3): User comes in from Page C (http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars/justice.cshtml) using ?era=3. They see “Start this Timeline” on era 3, “View this timeline” on era 1 and 2. User is able to navigate back to Page C via the header navigation at any point. Once complete, the Back to Module button links to Page C. If the user clicks the home button, they see “View this Timeline” on all three eras.

Scenario 4 (complete): User comes in from Page D (http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars/index.cshtml#summative) using ?era=4. They see “View this timeline” on all eras. User is able to navigate back to Page D via the header navigation at any point.

[amberreeves]

From Laurie

Education reviewed and the scenarios presented for the timelines and these match their expectations about user experience.

Timeline adjustments We had some internal disagreement about the appropriate way to implement this once we tested it. Before making further adjustments, can you please review the following scenarios to confirm that we are building this the way that you're expecting?

Scenario 1 (Era 1): User comes in from Page A (http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars-tactics/index.html) using ?era=1. They see “Start this Timeline” on era 1, and eras 2 and 3 are grayed out. User is able to navigate back to Page A via the header navigation at any point. Once complete, the Back to Module button links to Page A. If the user clicks the home button, they see “View this Timeline” on era 1, and eras 2 and 3 are still grayed out.

Scenario 2 (Era 2): User comes in from Page B (http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars/backlash.cshtml) using ?era=2. They see “Start this Timeline” on era 2, “View this timeline” on era 1, and era 3 is grayed out. User is able to navigate back to Page B via the header navigation at any point. Once complete, the Back to Module button links to Page B. If the user clicks the home button, they see “View this Timeline” on era 1 and 2, and era 3 is grayed out.

Scenario 3 (Era 3): User comes in from Page C (http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars/justice.cshtml) using ?era=3. They see “Start this Timeline” on era 3, “View this timeline” on era 1 and 2. User is able to navigate back to Page C via the header navigation at any point. Once complete, the Back to Module button links to Page C. If the user clicks the home button, they see “View this Timeline” on all three eras.

Scenario 4 (complete): User comes in from Page D (http://nmai-webdev01.si.edu:84/nk360/pnw-fish-wars/index.cshtml#summative) using ?era=4. They see “View this timeline” on all eras. User is able to navigate back to Page D via the header navigation at any point.

[mtedeschi]

To be deployed.