Intro task updates #202
Intro task updates #202
Conversation
| keyboard_choices: 'ALL_KEYS', | ||
| button_html: '<button class="primary" style=margin-top:10%>Exit</button>', | ||
| on_load: () => { | ||
| const endMessage = intro ? 'introFinished' : 'taskFinished'; |
There was a problem hiding this comment.
Can we rename the mediaAsset to taskFinished instead of introFinished?
There was a problem hiding this comment.
taskFinished is the asset that all the other tasks use - the text is "You've completed the game. Thank you!" and introFinished is a separate asset for intro only that I just created (it says "You've finished the instructions. Thank you!"). I could definitely rename introFinished, but I think it has to be different from taskFinished. Sorry if I'm misunderstanding your comment though!
There was a problem hiding this comment.
Makes sense. I guess when we pull them both in the common folder that we have been talking about, both can exist. So a config param makes sense. I am wondering though for future proofing should we pass the asset name as the parameter to taskFinished as opposed to supporting just two use cases. If we pass the asset name then in the future we can support as many ending screens as we want. But that is optional, I'll leave it up to you.
There was a problem hiding this comment.
That makes sense, I switched it so that we now pass in the asset name.
| <div class="lev-row-container instruction"> | ||
| <p>${t[data.prompt]}</p> | ||
| <div class="lev-row-container instruction" style="width: 90vw;"> | ||
| <p style="font-size: 1.5em;">${t[data.prompt]}</p> |
There was a problem hiding this comment.
I would prefer if these went into the class definitions. You can add a new definition of font size called:
font-size-xs-em: 1.5em and then update the:
&.instruction {
display: flex;
padding: $lev-spacing-s;
justify-content: center;
align-items: center;
text-align: center;
border: 3px solid $bg-accent_secondary;
border-radius: 32px;
background-color: $bg-bubble-base;
width: 90vw;
p {
font-size: $font-size-xs-em;
font-weight: $font-weight-light;
line-height: 1.0;
margin: 0;
}
Does the width need to be 90vw? or should the max-width be 90vw? We want consistent experience so we will need to just make sure it looks good across different tasks.
There was a problem hiding this comment.
That makes sense, I'll work on adding it to the class definition. I think setting max-width to 90vw would probably be better, so I'll try that - thanks!
There was a problem hiding this comment.
I ended up making an instructions-small class with the font size and max-width changes and using that for intro - I thought making the font smaller for all tasks didn't look as good. Let me know if you would prefer a different design though!
I resized some of the elements in the instructions to prevent them from going off the screen - as far as I can tell using the device emulator in chrome, it now fits inside all ipad screens (as well as my own laptop). I also changed the message shown at the end of the task so that it makes more sense (it now says "instructions" rather than "game").