Add in document title to interactive examples

[schalkneethling]

@dipikabh started a discussion thread here after having talked through it internally. The idea has great support across the content team. I have also mentioned this to @HerminaC and the decision was made to go ahead with the plan.

This means we will add an h2 heading to the output of the interactive example macro. This would then have the additional benefit of it showing up in the table of contents for all pages with an interactive example.

[schalkneethling]

Try it

Interactive example

Interactive demo

[dipikabh]

Thanks @schalkneethling for the screenshots showing all the possibilities being discussed!

@ddbeck @Rumyra: If we go with the option of "Try it", do we want to add an exclamation mark so that it says "Try it!"?

I noticed that in the JS learning area, we have the section heading "Test your skills!".

[caugner]

Have we considered adding this header directly to all articles in mdn/content, to be consistent with the other headers?

Other macros like CSSInfo and csssyntax don't add a heading either:

https://github.com/mdn/content/blob/468263d78e51ed942e64b47b1bbef5dfbbc689bf/files/en-us/web/css/width/index.md?plain=1#L68-L74

[schalkneethling]

Have we considered adding this header directly to all articles in mdn/content, to be consistent with the other headers?

That is indeed the plan once we have settled on a title to test with our readers.

[ddbeck]

I know it was my idea, but I'm loving the "Try it" header—it feels much more approachable.

@dipikabh

If we go with the option of "Try it", do we want to add an exclamation mark so that it says "Try it!"?

I'm inclined to go without the punctuation. I think the learning area has a breezier tone than the reference docs. I think people bounce from reference page to reference page pretty quickly—the exclamation loses its potency with repetition, I think.

I'm also favorable to trying this out with other macros, but I say we start with just one and see how it goes.

[schalkneethling]

@ddbeck @dipikabh Shall we go ahead and trial Try it?

[dipikabh]

@ddbeck @dipikabh Shall we go ahead and trial Try it?

We should 👍. Thanks!