Skip to content

Commit

Permalink
Merge pull request #2407 from codecrafters-io/tweak-second-stage-inst…
Browse files Browse the repository at this point in the history 
…ructions-card

Tweak 2nd stage instructions for the Solution experiment
  • Loading branch information
@rohitpaulk
rohitpaulk authored Nov 19, 2024
2 parents 9c86ba4 + 6fe5157 commit 6ecb1e4
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 144 deletions.
62 changes: 29 additions & 33 deletions .../course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,16 @@
<div class="prose dark:prose-invert prose-compact">
<p>
Head over to your editor / IDE and implement your solution.
</p>

<p>
{{#if @shouldRecommendLanguageGuide}}
If you want a quick look at what functions to use or how to structure your code, we recommend looking at
<LinkTo @route="course.stage.code-examples">Code Examples</LinkTo>
tab or the
<a href="#language-guide-card">{{@repository.language.name}} Guide</a>
card.
{{else}}
If you want a quick look at what functions to use or how to structure your code, we recommend looking at
<LinkTo @route="course.stage.code-examples">Code Examples</LinkTo>
tab.
{{/if}}
</p>
</div>
<p class="prose dark:prose-invert prose-compact mb-3">
Head over to your editor / IDE and implement your solution.
</p>

{{#if (and @shouldShowSolution this.solution)}}
<BlurredOverlay @isBlurred={{this.solutionIsBlurred}}>
<BlurredOverlay
{{on "click" this.handleRevealSolutionButtonClick}}
class="mb-3 group"
@isBlurred={{this.solutionIsBlurred}}
@overlayClass="inset-px rounded cursor-pointer group-hover:backdrop-blur-[3px] group-hover:bg-gray-50/20 group-hover:bg-gray-50/0 dark:bg-gray-900/20 dark:group-hover:bg-gray-900/0"
>
<:content>
<div class="flex flex-col gap-4 my-3">
<div class="flex flex-col gap-4">
{{#each this.solution.changedFiles as |changedFile|}}
{{! Extra if condition convinces typescript that solution isn't null }}
{{#if this.solution}}
Expand All @@ -34,23 +23,30 @@
{{/if}}
{{/each}}
</div>

{{#if @shouldRecommendLanguageGuide}}
<p class="prose dark:prose-invert prose-compact">
For a more detailed explanation on how this solution works, view the
<a href="#language-guide-card">{{@repository.language.name}} Guide</a>
card.
</p>
{{/if}}
</:content>

<:overlay>
<PrimaryButton {{on "click" this.handleRevealSolutionButtonClick}} class="self-center" data-test-reveal-solution-button>
<SecondaryButton
class="self-center bg-white group-hover:bg-teal-50 dark:bg-gray-900 dark:group-hover:bg-gray-900/80 backdrop-blur-3xl group-hover:text-teal-600 dark:group-hover:text-teal-400 group-hover:border-teal-600 dark:group-hover:border-teal-400"
data-test-reveal-solution-button
>
<div class="flex items-center gap-2">
{{svg-jar "eye" class="size-6"}}
<span>Reveal Solution</span>
<span>Click to reveal solution</span>
</div>
</PrimaryButton>
</SecondaryButton>
</:overlay>
</BlurredOverlay>
{{/if}}
{{/if}}

<p class="prose dark:prose-invert prose-compact">
{{#if @shouldRecommendLanguageGuide}}
For a more detailed explanation on how this solution works, view the
<a href="#language-guide-card">{{@repository.language.name}} Guide</a>
card.
{{else}}
If you want a quick look at what functions to use or how to structure your code, we recommend looking at
<LinkTo @route="course.stage.code-examples">Code Examples</LinkTo>
tab.
{{/if}}
</p>
34 changes: 0 additions & 34 deletions ...s/course-page/course-stage-step/second-stage-instructions-card/read-instructions-step.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,6 @@
<a href="#your-task-card">Your Task</a>
card below contains a description of what you need to implement to pass tests.
</p>
<p>
We also recommend taking a look at:
</p>
<ul>
<li>
The
<LinkTo @route="course.stage.code-examples">Code Examples</LinkTo>
tab, which contains code examples from other users.
</li>

{{#if @shouldRecommendLanguageGuide}}
<li>
The
<a href="#language-guide-card">{{@repository.language.name}} Guide</a>
card, which contains
{{@repository.language.name}}-specific instructions for this stage.
</li>
{{/if}}

{{! Let's limit to 2 suggestions for now so that we don't overwhelm the user.}}
{{#if (gt @courseStage.screencasts.length 0)}}
<li>
The
<LinkTo @route="course.stage.screencasts" data-test-screencasts-link>Screencasts</LinkTo>
tab, if you prefer more detailed video walkthroughs.
</li>
{{else if (gt @courseStage.concepts.length 0)}}
<li>
The
<LinkTo @route="course.stage.concepts" data-test-concepts-link>Concepts</LinkTo>
tab, if you want to learn more about the fundamental concepts related to this stage.
</li>
{{/if}}
</ul>
<p>
Mark this step as complete once you've read the instructions and are ready to implement your solution.
</p>
Expand Down
7 changes: 6 additions & 1 deletion app/components/secondary-button.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
<BaseButton @size={{@size}} @isDisabled={{@isDisabled}} class="border-teal-500 hover:border-teal-600 text-teal-500 hover:text-teal-600" ...attributes>
<BaseButton
@size={{@size}}
@isDisabled={{@isDisabled}}
class="border-teal-500 hover:border-teal-600 dark:hover:border-teal-400 text-teal-500 hover:text-teal-600 dark:hover:text-teal-400"
...attributes
>
{{yield}}
</BaseButton>
76 changes: 38 additions & 38 deletions tests/acceptance/course-page/complete-second-stage-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,42 +148,42 @@ module('Acceptance | course-page | complete-second-stage', function (hooks) {
assert.ok(coursePage.completedStepNotice.isVisible, 'Completed step notice is visible');
});

test('should show a screencasts link if there are screencasts available', async function (assert) {
testScenario(this.server);
signIn(this.owner, this.server);

let currentUser = this.server.schema.users.first();
let python = this.server.schema.languages.findBy({ name: 'Python' });
let redis = this.server.schema.courses.findBy({ slug: 'redis' });

this.server.create('repository', 'withFirstStageCompleted', {
course: redis,
language: python,
name: 'Python #1',
user: currentUser,
});

this.server.create('course-stage-screencast', {
language: python,
user: currentUser,
courseStage: redis.stages.models.sortBy('position')[1],
authorName: null,
canonicalUrl: 'https://www.loom.com/share/1dd746eaaba34bc2b5459ad929934c08?sid=a5f6ec60-5ae4-4e9c-9566-33235d483431',
publishedAt: '2023-06-30T19:11:29.254Z',
description: 'Hey there! blah blah',
durationInSeconds: 808.5666666666664,
embedHtml:
'\u003cdiv\u003e\u003cdiv style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"\u003e\u003ciframe src="//cdn.iframe.ly/api/iframe?click_to_play=1\u0026url=https%3A%2F%2Fwww.loom.com%2Fshare%2F1dd746eaaba34bc2b5459ad929934c08%3Fsid%3Da5f6ec60-5ae4-4e9c-9566-33235d483431\u0026key=3aafd05f43d700b9a7382620ac7cdfa3" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="encrypted-media *;"\u003e\u003c/iframe\u003e\u003c/div\u003e\u003c/div\u003e',
sourceIconUrl: 'https://cdn.loom.com/assets/favicons-loom/android-chrome-192x192.png',
originalUrl: 'https://www.loom.com/share/1dd746eaaba34bc2b5459ad929934c08?sid=a5f6ec60-5ae4-4e9c-9566-33235d483431',
thumbnailUrl: 'https://cdn.loom.com/sessions/thumbnails/1dd746eaaba34bc2b5459ad929934c08-00001.gif',
title: 'Testing Course Completion Functionality',
});

await catalogPage.visit();
await catalogPage.clickOnCourse('Build your own Redis');

await coursePage.secondStageInstructionsCard.steps[0].click();
assert.ok(coursePage.secondStageInstructionsCard.hasScreencastsLink, 'screencasts link should be present');
});
// test('should show a screencasts link if there are screencasts available', async function (assert) {
// testScenario(this.server);
// signIn(this.owner, this.server);

// let currentUser = this.server.schema.users.first();
// let python = this.server.schema.languages.findBy({ name: 'Python' });
// let redis = this.server.schema.courses.findBy({ slug: 'redis' });

// this.server.create('repository', 'withFirstStageCompleted', {
// course: redis,
// language: python,
// name: 'Python #1',
// user: currentUser,
// });

// this.server.create('course-stage-screencast', {
// language: python,
// user: currentUser,
// courseStage: redis.stages.models.sortBy('position')[1],
// authorName: null,
// canonicalUrl: 'https://www.loom.com/share/1dd746eaaba34bc2b5459ad929934c08?sid=a5f6ec60-5ae4-4e9c-9566-33235d483431',
// publishedAt: '2023-06-30T19:11:29.254Z',
// description: 'Hey there! blah blah',
// durationInSeconds: 808.5666666666664,
// embedHtml:
// '\u003cdiv\u003e\u003cdiv style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"\u003e\u003ciframe src="//cdn.iframe.ly/api/iframe?click_to_play=1\u0026url=https%3A%2F%2Fwww.loom.com%2Fshare%2F1dd746eaaba34bc2b5459ad929934c08%3Fsid%3Da5f6ec60-5ae4-4e9c-9566-33235d483431\u0026key=3aafd05f43d700b9a7382620ac7cdfa3" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="encrypted-media *;"\u003e\u003c/iframe\u003e\u003c/div\u003e\u003c/div\u003e',
// sourceIconUrl: 'https://cdn.loom.com/assets/favicons-loom/android-chrome-192x192.png',
// originalUrl: 'https://www.loom.com/share/1dd746eaaba34bc2b5459ad929934c08?sid=a5f6ec60-5ae4-4e9c-9566-33235d483431',
// thumbnailUrl: 'https://cdn.loom.com/sessions/thumbnails/1dd746eaaba34bc2b5459ad929934c08-00001.gif',
// title: 'Testing Course Completion Functionality',
// });

// await catalogPage.visit();
// await catalogPage.clickOnCourse('Build your own Redis');

// await coursePage.secondStageInstructionsCard.steps[0].click();
// assert.ok(coursePage.secondStageInstructionsCard.hasScreencastsLink, 'screencasts link should be present');
// });
});
76 changes: 38 additions & 38 deletions tests/acceptance/course-page/complete-stage-without-changes-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,42 +99,42 @@ module('Acceptance | course-page | complete-stage-without-changes', function (ho
assert.ok(coursePage.completedStepNotice.isVisible, 'Completed step notice is visible');
});

test('should show a screencasts link if there are screencasts available', async function (assert) {
testScenario(this.server);
signIn(this.owner, this.server);

let currentUser = this.server.schema.users.first();
let python = this.server.schema.languages.findBy({ name: 'Python' });
let redis = this.server.schema.courses.findBy({ slug: 'redis' });

this.server.create('repository', 'withFirstStageCompleted', {
course: redis,
language: python,
name: 'Python #1',
user: currentUser,
});

this.server.create('course-stage-screencast', {
language: python,
user: currentUser,
courseStage: redis.stages.models.sortBy('position')[1],
authorName: null,
canonicalUrl: 'https://www.loom.com/share/1dd746eaaba34bc2b5459ad929934c08?sid=a5f6ec60-5ae4-4e9c-9566-33235d483431',
publishedAt: '2023-06-30T19:11:29.254Z',
description: 'Hey there! blah blah',
durationInSeconds: 808.5666666666664,
embedHtml:
'\u003cdiv\u003e\u003cdiv style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"\u003e\u003ciframe src="//cdn.iframe.ly/api/iframe?click_to_play=1\u0026url=https%3A%2F%2Fwww.loom.com%2Fshare%2F1dd746eaaba34bc2b5459ad929934c08%3Fsid%3Da5f6ec60-5ae4-4e9c-9566-33235d483431\u0026key=3aafd05f43d700b9a7382620ac7cdfa3" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="encrypted-media *;"\u003e\u003c/iframe\u003e\u003c/div\u003e\u003c/div\u003e',
sourceIconUrl: 'https://cdn.loom.com/assets/favicons-loom/android-chrome-192x192.png',
originalUrl: 'https://www.loom.com/share/1dd746eaaba34bc2b5459ad929934c08?sid=a5f6ec60-5ae4-4e9c-9566-33235d483431',
thumbnailUrl: 'https://cdn.loom.com/sessions/thumbnails/1dd746eaaba34bc2b5459ad929934c08-00001.gif',
title: 'Testing Course Completion Functionality',
});

await catalogPage.visit();
await catalogPage.clickOnCourse('Build your own Redis');

await coursePage.secondStageInstructionsCard.steps[0].click();
assert.ok(coursePage.secondStageInstructionsCard.hasScreencastsLink, 'screencasts link should be present');
});
// test('should show a screencasts link if there are screencasts available', async function (assert) {
// testScenario(this.server);
// signIn(this.owner, this.server);

// let currentUser = this.server.schema.users.first();
// let python = this.server.schema.languages.findBy({ name: 'Python' });
// let redis = this.server.schema.courses.findBy({ slug: 'redis' });

// this.server.create('repository', 'withFirstStageCompleted', {
// course: redis,
// language: python,
// name: 'Python #1',
// user: currentUser,
// });

// this.server.create('course-stage-screencast', {
// language: python,
// user: currentUser,
// courseStage: redis.stages.models.sortBy('position')[1],
// authorName: null,
// canonicalUrl: 'https://www.loom.com/share/1dd746eaaba34bc2b5459ad929934c08?sid=a5f6ec60-5ae4-4e9c-9566-33235d483431',
// publishedAt: '2023-06-30T19:11:29.254Z',
// description: 'Hey there! blah blah',
// durationInSeconds: 808.5666666666664,
// embedHtml:
// '\u003cdiv\u003e\u003cdiv style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"\u003e\u003ciframe src="//cdn.iframe.ly/api/iframe?click_to_play=1\u0026url=https%3A%2F%2Fwww.loom.com%2Fshare%2F1dd746eaaba34bc2b5459ad929934c08%3Fsid%3Da5f6ec60-5ae4-4e9c-9566-33235d483431\u0026key=3aafd05f43d700b9a7382620ac7cdfa3" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="encrypted-media *;"\u003e\u003c/iframe\u003e\u003c/div\u003e\u003c/div\u003e',
// sourceIconUrl: 'https://cdn.loom.com/assets/favicons-loom/android-chrome-192x192.png',
// originalUrl: 'https://www.loom.com/share/1dd746eaaba34bc2b5459ad929934c08?sid=a5f6ec60-5ae4-4e9c-9566-33235d483431',
// thumbnailUrl: 'https://cdn.loom.com/sessions/thumbnails/1dd746eaaba34bc2b5459ad929934c08-00001.gif',
// title: 'Testing Course Completion Functionality',
// });

// await catalogPage.visit();
// await catalogPage.clickOnCourse('Build your own Redis');

// await coursePage.secondStageInstructionsCard.steps[0].click();
// assert.ok(coursePage.secondStageInstructionsCard.hasScreencastsLink, 'screencasts link should be present');
// });
});

0 comments on commit 6ecb1e4

Please sign in to comment.