Instructions for how to create an accordion 

 

Sprint Review accordion templates shown below:

Two ways to set up an accordion:

  1. From the right side bar, under LAYOUT, drag and drop ROW module onto the layout area
  2. From the right side bar, under CONTENT, drag and drop HTML element inside the ROW module.
    Within the HTML dialogue box, click on the Source Code < > button and copy and paste (CTRL+V) the HTML coding show below: 

<div style="background-color: #f8f8f8; padding-left: 10px;">
<div class="accordion-heading keepHeight">
<div style="border-top: 2px solid #00446b;" div=""></div>
<div class="accordion-toggle" href="#coltwo" data-toggle="collapse" style="cursor: pointer;">
<div class="row rotateicon esdBlueColor marginTop20">
<div class="col-md-11" style="color: black;">
<h3 class="faqMidBold">Accordion 3</h3>
</div>
<div class="col-md-1">
<div class="vertical-center" style="cursor: pointer;"><span class="fa fa-plus rotate fa-2x"></span></div>
</div>
</div>
</div>
</div>
<div class="accordion-body collapse in" id="colone">
<div class="accordion-inner">
<p class="accordion-body collapse in esd-paragraph-15px" id="colone"></p>
<p class="faqMidBold esd-paragraph-15px"><strong>Self-Service Registration: Flow</strong></p>
<p class="faqMidBold esd-paragraph-15px"><strong>Recording Segments |&nbsp;<span style="text-decoration: underline;"><a href="https://forms.microsoft.com/pages/responsepage.aspx?id=F-LQEU4mCkCLoFfcwSfXLZ09flxRQnBIuyjFLOHCkFpUMEpEU1FLT0RKMkpUOEM1VVFSU0dVNkJHVC4u" target="_blank" title="mouse over/ alt text">Feedback Form</a></span></strong></p>
<ul>
<li>
<p class="esd-paragraph-15px"><span style="text-decoration: underline;"><a href="https://www.youtube.com/watch?v=lIEHJMu197I&amp;t=40s" target="_blank" title="mouse over/ alt text">Status of workforce foundation product milestones</a></span>&nbsp;(8 minutes)</p>
</li>
</ul>
<ul>
<li>
<p class="esd-paragraph-15px"><span style="text-decoration: underline;"><a href="https://www.youtube.com/watch?v=lIEHJMu197I&amp;t=531s" target="_blank" title="mouse over/ alt text">Self-service registration flow</a></span>&nbsp;(38 minutes)</p>
</li>
</ul>
<ul>
<li>
<p class="esd-paragraph-15px"><span><span style="text-decoration: underline;"><a href="https://www.youtube.com/watch?v=lIEHJMu197I&amp;t=2839s" target="_blank" title="mouse over, alt text">Impersonation feature</a></span>&nbsp;(16 minutes)</span></p>
</li>
</ul>
<p></p>
<p></p>
<p class="esd-paragraph-15px"><strong>&nbsp;</strong></p>
<p class="esd-paragraph-15px"><strong>Self-Service Registration: Create New Job Seeker Account</strong><br /><strong></strong></p>
<p class="esd-paragraph-15px"><strong>Recording Segments |&nbsp;<span style="text-decoration: underline;"><a href="https://forms.microsoft.com/pages/responsepage.aspx?id=F-LQEU4mCkCLoFfcwSfXLZ09flxRQnBIuyjFLOHCkFpURU1MU1ZTVlZITTBGME1RRTRUOUFUVlU4Ni4u" target="_blank" title="mouse over/ alt text">Feedback Form</a></span></strong></p>
<ul>
<li>
<p class="esd-paragraph-15px"><span style="text-decoration: underline;"><a href="https://www.youtube.com/watch?v=fvslxEBEr5g&amp;t=45s" target="_blank" title="mouse over/ alt text">Sprint goals. overview, and feedback needs</a></span>&nbsp;(9 minutes)</p>
</li>
</ul>
<p></p>
<p class="esd-paragraph-15px"><strong>&nbsp;</strong></p>
<p class="accordion-body collapse in esd-paragraph-15px"></p>
</div>
</div>
</div>

 OR

Copy and paste the WYSIWYG (what you see is what you get) text from the HTML dialogue box into a new HTML editor.

 

 

Accordion 1

Self-Service Registration: Flow

Recording Segments | Feedback Form

 

Self-Service Registration: Create New Job Seeker Account

Recording Segments | Feedback Form

 

Self-Service Registration: Feedback

Recording Segments | Feedback Form

 

 

Accordion 2

Self-Service Intake: Introduction

Recording Segments | Feedback Form

 

Self-Service Intake: Dynamic Contact Record

Recording Segments | Feedback Form

 

Self-Service Intake: Review Your Information/Change Address

Recording Segments | Feedback Form

 

Self-Service Intake: Case Management System Field Labels

Recording Segments | Feedback Form

 

Self-Service Intake: Feedback and Flow

Recording Segments | Feedback Form

 

 

Accordion 3

Self-Service Registration: Flow

Recording Segments | Feedback Form

 

Self-Service Registration: Create New Job Seeker Account

Recording Segments | Feedback Form

 

Accordion 4

Self-Service Registration: Flow

Recording Segments | Feedback Form

 

Self-Service Registration: Create New Job Seeker Account

Recording Segments | Feedback Form

 

Accordion 5

Self-Service Registration: Flow

Recording Segments | Feedback Form

 

Self-Service Registration: Create New Job Seeker Account

Recording Segments | Feedback Form

 

 

This will cover basic functions for Orchard web publishing:

 

Basic updates

Include the following kinds of activities:

  • Edit or add text to an existing page within existing page layout
  • Use standard formatting options in content editor to adjust for consistency (headers, styles, bullets, font treatments, etc.)
  • Upload, replace, or remove media items
  • Link to files or other webpages
  • Preview, save, schedule, and publish pages

 

Tips and suggestions:

  1. Use italics, bold, and all caps very sparingly, if at all.
  2. Do not underline text – since links are often underlined on hover, it will make text appear like it’s interactive when it isn’t.
  3. Use the options in the text editor as they are – use “Headers” for titles and do not style them with bold or italics. Use “Paragraph” for body text.
  4. If you’re feeling like the page looks bad if you’re following the above rules, it’s possible you have a formatting issue. For instance, you can try adding more white space between sections, taking away some bulleted areas if there are too many, using a horizontal rule to create visual separation, etc. Sometimes publishers resort to bold/italics/underlines/using headers for body text when they feel frustrated that the page looks “off.


A good example of this is here: https://wpc.wa.gov/reports/dol-qra-dashboards - the page is very hard to scan with so many different text sizes and styles. There is no real logic to when italics or bold or underline is used, and headers are being used for paragraph text. I know it may be counter intuitive, but keeping text plain and using more white space or other low impact styling choices can improve readability and user engagement.

###

 

 

Who to contact

Lead Development Partners (listed below) represent the WorkSource community at-large in the product build meetings working with the Product Team. They facilitate meetings with subject matter experts in gathering details, however if staff have specific ideas or concerns, please reach out to them directly. 

The contact for the Product Team is Product Manager Michael Luchini (michael.luchini@esd.wa.gov).

 

Sprint Review Process

 

Glossary of terms 

  • Sprint Planning: The Product Manager will prioritize the product backlog items the team will work on during that sprint. The Product Manager also discusses their initial plan for completing those product backlog items with the team. 

  • Daily Scrum: A short daily meeting, ideally during the start of the workday. Each team member participates and updates on work completed the prior day, impediments and the plan for the day.

  • Backlog Refinement: When a Product Manager and some, or all of the rest of the team review items on the backlog to ensure it contains the appropriate items, prioritized by value. The backlog refinement is sometimes called grooming and can happen anytime in a sprint. 

  • Sprint Review & Demo: A meeting which the team determine what is finished and what is not and why. The demo showcases the value of work delivered to users and stakeholders. 

  • Sprint Retrospective: When the team discusses the sprint and determines what could be changed that might make the team continuously improve the sprint ceremonies.