You can use HTML ids


#1

You might have heard of ids in HTML.

Here's a heading with an id:

Welcome

<h2 id="welcome">Welcome</h2>

You might have some text in between.

'Lorem ipsum' filler text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non enim iam stirpis bonum quaeret, sed animalis. Ut placet, inquit, etsi enim illud erat aptius, aequum cuique concedere. Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Quam tu ponis in verbis, ego positam in re putabam.

Quodsi ipsam honestatem undique pertectam atque absolutam. Suam denique cuique naturam esse ad vivendum ducem. Quid ad utilitatem tantae pecuniae? Aliter homines, aliter philosophos loqui putas oportere?

Ego vero volo in virtute vim esse quam maximam; Honesta oratio, Socratica, Platonis etiam. Sed ea mala virtuti magnitudine obruebantur. Aliter homines, aliter philosophos loqui putas oportere? Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata; Haec para/doca illi, nos admirabilia dicamus. Eam stabilem appellas.

Omnis enim est natura diligens sui. Duo Reges: constructio interrete. Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Terram, mihi crede, ea lanx et maria deprimet. Neque solum ea communia, verum etiam paria esse dixerunt. Dici enim nihil potest verius. Theophrasti igitur, inquit, tibi liber ille placet de beata vita? Non risu potius quam oratione eiciendum?

Mihi enim satis est, ipsis non satis. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Quid sequatur, quid repugnet, vident. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Quamquam in hac divisione rem ipsam prorsus probo, elegantiam desidero. Et quidem, inquit, vehementer errat; Illis videtur, qui illud non dubitant bonum dicere -; Quorum altera prosunt, nocent altera. Apud ceteros autem philosophos, qui quaesivit aliquid, tacet; Eaedem res maneant alio modo. Ergo id est convenienter naturae vivere, a natura discedere. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam.

And later elsewhere in the topic, to link to that specific ID, you just need to add #welcome to the end of the link:

Click here to go back to the Welcome heading

[Click here to go back to the Welcome heading](http://forum.gethopscotch.com/t/you-can-use-html-ids/35931#welcome)

#2

I didn't know we could do this here until I saw a Contents page on Discourse Meta, and the first thing that came to my mind was:

This could be used for a forum game

:grin:

But you could do something like this:

You are walking down a path. Then the path branches. One seems to wander off towards the misty sea and the other towards rolling hills.

What do you decide?
Beach
Hills

You could even do it with normal links anyway :slight_smile:


#4

Story

Hills

You chose the beautiful hills :railway_track:

Looks like there's a railway track, and... is that a train station? Want to ride the train?
Yes


#5

I chose the warm beach xD


#6

Hmm it seems not to be working, let me see... – ooh @MR.GAM3R is here :slight_smile: I know very little about web.


The idea is that people can continue from each others' previous stories with links :thinking: and that it'll be like a Choose your own adventure game for anyone clicking through them.
Stories can be hidden in [spoilers] or [details], and elements with ids can be placed as headings.

More rule ideas

Multiple links can lead to the same post (just add the same #id to the end of the link)
But a link can lead to only one other post (ids are unique)

If you wanted to start somewhere random, you could pull the scrollbar on the right to a random post.

Edit, okay some observations:

  • ids don't seem to work when put in elements inside [details]
  • ids work for <h1,2,3> but not <b> so far from what I've tried

#7

Beach

Story

You arrived at the peaceful beach yay :island:


Train

Story

Choo Choo :steam_locomotive:


Okay I'll leave these as (not great) examples of using ids, if I continue further on explaining the game component, it'll stray into the #random-stuff category which would be better done in a separate topic :grin:

If you want to get more into Choose your own adventure games in general without this confusing stuff, I recommend Twine as tool :slight_smile:

http://twinery.org


#8

@Steelhooves once used this, I think.


#9

I didn't knew this and it is so cool! Thanks for sharing :slight_smile:


#10

Whoa

that's actually really cool


#11

This is really awesome! I am going to make a few games later.


#12

Wow that's awesome!! This is super useful for long tutorials or just long posts/topics in general to help you navigate


#13

This is a really cool idea! Thank you for posting this, or I may have never known! :slight_smile:


#14

Many of you may already knew this, put if you change the numbers after the h:s: <h2** id="idname">Example text</h2>, you can change the text size:
h4:

Heading 4 (h4)


h3:

Heading 3 (h3)


h2:

Heading 2 (h2)


And it works fine, test it by yourself:
H4
H3
H2
I have not tested with all of these atributes to see if they work with id:s, but these are some of HTML formatting codes and they work at least as formating codes (just remove the spaces):

- Bold text < /b >
- Important text < strong >
- Italic text < i >
- Emphasized text < em >
- Marked text < mark >
- Small text < small >
- Deleted text < del >
- Inserted text < ins >
- Subscript text < sub >
- Superscript text < sup >

I found this on: https://www.w3schools.com/html/html_formatting.asp
I hope that this is helpful!