The Case of the Clickable Murdle

This was cobbled together using Grayswandir's Murdle Skin for the aesthetic and the grid, and La_Temperanza's Choose Your Own Adventure Skin for the interactive elements.
Additional templates (larger grids, other aesthetic elements, etc...) and further details on how to do the html are available in their respective templates.

(See the end of the work for other works inspired by this one.)

Chapter Text

Your introductory narrative goes here.

Each suspect brought one weapon to one location with one motive, but only one was the culprit (today).

Evidence

Here's a clue.
And another.
You can put as many clues as you like here.
You can even include coded messages: I NKWO WOH ETH ILKELR SI.
And you can put the final evidence of the actual crime in red.

🔎

🧑

Suspect 1 Name

A little blurb about them.

stats • more stats

🧛

Suspect 2 Name

A little blurb about them.

stats • more stats

🧙

Suspect 3 Name

A little blurb about them.

stats • more stats

💁

Suspect 4 Name

A little blurb about them.

stats • more stats

💰

Motive 1

Description goes here.

Stats • More stats

🤝

Motive 2

Description goes here.

Stats • More stats

🔫

Motive 3

Description goes here.

Stats • More stats

🗣

Motive 4

Description goes here.

Stats • More stats

🔪

Weapon 1

Description goes here.

Stats • More stats

🍸

Weapon 2

Description goes here.

Stats • More stats

💣

Weapon 3

Description goes here.

Stats • More stats

👊

Weapon 4

Description goes here.

Stats • More stats

🌳

Location 1

Description goes here.

Stats

🍽️

Location 2

Description goes here.

Stats

🏊

Location 3

Description goes here.

Stats

🛋️

Location 4

Description goes here.

Stats

(Click the images around the board for more information about each suspect/weapon/location, and to fill out the grid, click once in a square for an X and a second time for a check.)

Chapter Text

The first step in creating your own interactive Murdle is creating a new work skin and copying all of the following CSS into it.

Adapted from Grayswandir's Murdle Work Skin:

#workskin .main {
background: #fbfbf9;
color: #000000;
font-family: "Courier New", Courier;
font-size: 18px;
line-height: 1.7;
border: 1px black solid;
border-bottom: 1px black solid;
padding-top: 1.5em;
padding-bottom: 1em;
padding-right: 1.3em;
padding-left: 1em;
border-radius: 10px;
}

#workskin .title {
font-family: "Courier New", Courier;
font-weight: bold;
color: #A30B37;
text-transform: uppercase;
}

#workskin .case-title {
font-family: "Courier New", Courier;
font-size: 26px;
font-weight: bold;
color: #A30B37;
line-height: 1.5;
text-transform: uppercase;
}

#workskin .subtitle {
font-family: "Courier New", Courier;
font-weight: bold;
font-size: 18px;
color: #A30B37;
line-height: 1.5;
text-transform: uppercase;
}

#workskin .small-text {
font-size: 12px;
}

#workskin .cardback-small {
background: #A30B37;
color: #fbfbf9;
border: 5px black solid;
border-bottom: 5px black solid;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 1em;
padding-left: 1em;
border-radius: 10px;
width: 105px;
height: 190px;
margin: auto;
float: left;
}

#workskin .cardback-medium {
background: #A30B37;
color: #fbfbf9;
border: 5px black solid;
border-bottom: 5px black solid;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 1em;
padding-left: 1em;
border-radius: 10px;
width: 200px;
height: 350px;
margin: auto;
float: left;
}

#workskin .cardback-large {
background: #A30B37;
color: #fbfbf9;
border: 5px black solid;
border-bottom: 5px black solid;
padding-top: .5em;
padding-bottom: .5em;
padding-right: 1.5em;
padding-left: 1.5em;
border-radius: 10px;
width: 300px;
max-width: 85%;
min-height: 500px;
margin: auto;
}

#workskin .card-small-emoji {
font-family: "Courier New", Courier;
color: transparent;
font-weight: bold;
font-size: 90px;
line-height: 190px;
display: block;
text-align: center;
margin: auto;
text-shadow: 0 0 0 #fff5e2;
}

#workskin .card-med-emoji {
font-family: "Courier New", Courier;
color: transparent;
font-weight: bold;
font-size: 150px;
line-height: 350px;
display: block;
text-align: center;
margin: auto;
text-shadow: 0 0 0 #fff5e2;
}

#workskin .card-small {
background: #ffffff;
color: black;
font-size: 18px;
font-family: "Courier New", Courier;
line-height: 18px;
display: block;
border: 5px black solid;
border-bottom: 5px black solid;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 1em;
padding-left: 1em;
border-radius: 10px;
width: 105px;
height: 190px;
margin: auto;
float: left;
}

#workskin .card-small-name {
font-family: "Courier New", Courier;
font-size: 18px;
text-align: center;
color: #000000;
font-weight: bold;
text-transform: uppercase;
}

#workskin .card-emoji {
font-family: "Courier New", Courier;
font-size: 65px;
text-align: center;
color: transparent;
font-weight: bold;
margin: auto;
text-shadow: 0 0 0 #000000;
}

#workskin .card {
background: #ffffff;
color: black;
font-size: 18px;
font-family: "Courier New", Courier;
line-height: 1.7;
display: block;
border: 5px black solid;
border-bottom: 5px black solid;
padding-top: .5em;
padding-bottom: .5em;
padding-right: .5em;
padding-left: .5em;
border-radius: 10px;
width: 230px;
height: 350px;
margin: auto;
float: left;
}

#workskin .card-name {
font-family: "Courier New", Courier;
font-size: 22px;
text-align: center;
color: #000000;
font-weight: bold;
text-transform: uppercase;
}

#workskin .card-text {
font-family: "Courier New", Courier;
font-size: 18px;
text-align: center;
color: black;
}

#workskin .card-stats {
font-family: "Courier New", Courier;
font-size: 18px;
text-align: center;
color: black;
font-weight: bold;
text-transform: uppercase;
}

#workskin .card-large {
background: #ffffff;
color: black;
font-size: 18px;
font-family: "Courier New", Courier;
line-height: 1.7;
display: block;
border: 5px black solid;
border-bottom: 5px black solid;
padding-top: .5em;
padding-bottom: .5em;
padding-right: 1.5em;
padding-left: 1.5em;
border-radius: 10px;
width: 300px;
max-width: 85%;
min-height: 500px;
margin: auto;
}

#workskin .card-large-text {
font-family: "Courier New", Courier;
font-size: 18px;
color: black;
text-align: left;
padding-right: .2em;
padding-left: 1.2em;
}

#workskin .card-reverse {
font-family: "Courier New", Courier;
color: transparent;
font-weight: bold;
font-size: 90px;
display: block;
text-align: right;
margin: auto;
}

#workskin table.card-smalltable {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 490px;
max-width: 85%;
margin: auto;
}

#workskin table.cards {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 715px;
max-width: 85%;
margin: auto;
}

#workskin td.card-med {
padding-top: 6em;
padding-bottom: 6em;
padding-right: 6em;
padding-left: 6em;
}

#workskin .divider {
position: relative;
float: left;
padding-top: .2em;
padding-bottom: .2em;
padding-right: .2em;
padding-left: .2em;
border: none;
margin: auto;
}

#workskin .evidence {
background: #fff5e2;
color: black;
border: 5px black solid;
border-bottom: 5px black solid;
font-family: "Courier New", Courier;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 1.5em;
padding-left: 1.5em;
line-height: 1.7;
border-radius: 10px;
font-size: 18px;
font-weight: bold;
width: 85%;
margin: auto;
}

#workskin .notebook {
background: #fff5e2;
color: black;
border: 5px black solid;
border-bottom: 5px black solid;
font-family: "Courier New", Courier;
padding-top: .3em;
padding-bottom: 1.5em;
padding-right: 1.5em;
padding-left: 1.5em;
line-height: 1.7;
border-radius: 10px;
display: block;
font-size: 18px;
width: 85%;
max-width: 600px;
margin: auto;
}

#workskin .notebook-title {
text-align: center;
font-family: "Courier New", Courier;
font-weight: bold;
font-size: 25px;
color: #A30B37;
line-height: 1.7;
text-transform: uppercase;
}

#workskin table.grid-small {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 85%;
max-width: 305px;
}

#workskin table.grid-med {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 85%;
max-width: 450px;
}

#workskin table.grid-large {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 85%;
max-width: 550px;
}

#workskin td.grid {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border: 2px solid;
border-collapse: collapse;
width: 30px;
height: 30px;
}

#workskin td.grid-none {
background: #fff5e2;
color: #fff5e2;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border: none;
border-collapse: collapse;
width: 30px;
height: 30px;
}

#workskin td.corner {
background: #fff5e2;
color: #fff5e2;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 30px;
height: 30px;
border: none;
}

#workskin td.emoji {
background: #fff5e2;
color: transparent;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 30px;
height: 30px;
border: none;
text-shadow: 0 0 0 #000000;
}

#workskin table.grid2-small {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 85%;
max-width: 305px;
}

#workskin table.grid2-med {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 85%;
max-width: 450px;
}

#workskin table.grid2-large {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 85%;
max-width: 550px;
}

#workskin td.grid2 {
background: #ffffff;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border: 2px solid;
border-collapse: collapse;
width: 30px;
height: 30px;
}

#workskin td.grid2-none {
background: #fbfbf9;
color: #fbfbf9;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border: none;
border-collapse: collapse;
width: 30px;
height: 30px;
}

#workskin td.corner2 {
background: #fbfbf9;
color: #fbfbf9;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 30px;
height: 30px;
border: none;
}

#workskin td.emoji2 {
background: #fbfbf9;
color: transparent;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 30px;
height: 30px;
border: none;
text-shadow: 0 0 0 #000000;
}

#workskin .redtext {
color: #A30B37;
}

#workskin .chess {
display: block;
line-height: 1.7;
word-break: break-word;
font-family: "Courier New", Courier;
text-align: center;
font-weight: bold;
font-size: 40px;
border: none;
}

#workskin .cardhintback {
background: #000000;
color: #ffffff;
font-size: 18px;
line-height: 18px;
display: block;
font-family: "Courier New", Courier;
border: 5px white solid;
border-bottom: 5px white solid;
outline: 2px black solid;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 1em;
padding-left: 1em;
border-radius: 10px;
width: 105px;
height: 190px;
margin: auto;
}

#workskin .card-hint-back-emoji {
font-family: "Courier New", Courier;
color: transparent;
font-weight: bold;
font-size: 90px;
line-height: 190px;
display: block;
text-align: center;
margin: auto;
text-shadow: 0 0 0 #ffffff;
}

#workskin .card-hint-back-emoji2 {
font-family: "Courier New", Courier;
color: transparent;
font-weight: bold;
font-size: 90px;
display: block;
text-align: center;
margin: auto;
text-shadow: 0 0 0 #ffffff;
}

#workskin .card-hint-back-text {
font-family: "Courier New", Courier;
font-size: 18px;
text-align: center;
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
}

#workskin .card-hint-large {
background: #000000;
color: #ffffff;
font-size: 18px;
font-family: "Courier New", Courier;
line-height: 1.7;
display: block;
border: 5px white solid;
border-bottom: 5px white solid;
outline: 2px black solid;
padding-top: .5em;
padding-bottom: .5em;
padding-right: 1.5em;
padding-left: 1.5em;
border-radius: 10px;
width: 300px;
max-width: 85%;
min-height: 500px;
margin: auto;
}

#workskin .card-hint-large-text {
font-family: "Courier New", Courier;
font-size: 18px;
color: #ffffff;
text-align: left;
padding-right: .2em;
padding-left: 1.2em;
}

#workskin .NavyColor {
color: transparent;
text-shadow: 0 0 0 #000080;
}

#workskin .BlueColor {
color: transparent;
text-shadow: 0 0 0 #016FB9;
}

#workskin .MaroonColor {
color: transparent;
text-shadow: 0 0 0 #AF3B6E;
}

#workskin .AzureColor {
color: transparent;
text-shadow: 0 0 0 #007FFF;
}

#workskin .SlateColor {
color: transparent;
text-shadow: 0 0 0 #708090;
}

#workskin .TuscanyColor {
color: transparent;
text-shadow: 0 0 0 #CDA2AB;
}

#workskin .AubergineColor {
color: transparent;
text-shadow: 0 0 0 #693B58;
}

#workskin .RaspberryColor {
color: transparent;
text-shadow: 0 0 0 #E30B5D;
}

#workskin .ChampagneColor {
color: transparent;
text-shadow: 0 0 0 #F4C97A;
}

#workskin .VerdigrisColor {
color: transparent;
text-shadow: 0 0 0 #48A9A6;
}

#workskin .GlaucousColor {
color: transparent;
text-shadow: 0 0 0 #6082B6;
}

#workskin .CrimsonColor {
color: transparent;
text-shadow: 0 0 0 #BA181B;
}

#workskin .GreyColor {
color: transparent;
text-shadow: 0 0 0 #8F8F8F;
}

#workskin .MangoColor {
color: transparent;
text-shadow: 0 0 0 #F08A4B;
}

#workskin .CoffeeColor {
color: transparent;
text-shadow: 0 0 0 #322214;
}

#workskin .RoseColor {
color: transparent;
text-shadow: 0 0 0 #FF66CC;
}

#workskin .PineColor {
color: transparent;
text-shadow: 0 0 0 #097A74;
}

#workskin .VioletColor {
color: transparent;
text-shadow: 0 0 0 #A54CFF;
}

#workskin .LavenderColor {
color: transparent;
text-shadow: 0 0 0 #967BB6;
}

#workskin .HoneyColor {
color: transparent;
text-shadow: 0 0 0 #F6AE2D;
}

#workskin .SaffronColor {
color: transparent;
text-shadow: 0 0 0 #F4C430;
}

#workskin .TangerineColor {
color: transparent;
text-shadow: 0 0 0 #F28500;
}

#workskin .CopperColor {
color: transparent;
text-shadow: 0 0 0 #B87333;
}

#workskin .AmaranthColor {
color: transparent;
text-shadow: 0 0 0 #B6244F;
}

#workskin .ApplegreenColor {
color: transparent;
text-shadow: 0 0 0 #66B447;
}

#workskin .CeladonColor {
color: transparent;
text-shadow: 0 0 0 #ACE1AF;
}

#workskin .EmeraldColor {
color: transparent;
text-shadow: 0 0 0 #33CA7F;
}

#workskin .RuleanColor {
color: transparent;
text-shadow: 0 0 0 #1DACD6;
}

#workskin .LapisColor {
color: transparent;
text-shadow: 0 0 0 #125E8A;
}

#workskin .AureolinColor {
color: transparent;
text-shadow: 0 0 0 #F2DB00;
}

#workskin .VermillionColor {
color: transparent;
text-shadow: 0 0 0 #E34234;
}

#workskin .MauveColor {
color: transparent;
text-shadow: 0 0 0 #E0B0FF;
}

#workskin .EminenceColor {
color: transparent;
text-shadow: 0 0 0 #6C3082;
}

#workskin .TanColor {
color: transparent;
text-shadow: 0 0 0 #FFF5E2;
}

#workskin .BlackColor {
color: transparent;
text-shadow: 0 0 0 #000000;
}

#workskin .WhiteColor {
color: transparent;
text-shadow: 0 0 0 #FFFFFF;
}

#workskin .Color {
color: #000000;
}

#workskin .noMargin {
margin: 0;
}

#workskin .floatleft {
float: left;
color: transparent;
}

#workskin .clearleft {
clear: left;
}

Adapted from La_Temperanza's Choose Your Own Adventure Work Skin:

#workskin .storycontainer {
margin: 0 auto;
overflow: hidden;
width: 100%;
height: 500px;
}

#workskin .page {
margin-top: 25px;
height: 500px;
overflow-y: auto;
}

#workskin .storycontainer-small {
margin: 0 auto;
overflow: hidden;
height: 30px;
}

#workskin .page-small {
margin-bottom: 1px;
height: 30px;
overflow-y: hidden;
}

In addition, the text boxes I'm using for this guide were adapted from the ones used for Grayswandir's Murdle Work Skin Tutorial (but they're not actually used in the Murdle itself):

#workskin .textbox-small {
background: #fbfbf9;
color: #000000;
font-family: "Courier New", Courier;
font-size: 12px;
line-height: 1.7;
border: 1px black solid;
border-bottom: 1px black solid;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 1em;
padding-left: 1em;
width: 85%;
max-width: 700px;
margin: 20px;
}

#workskin .textbox-large {
background: #fbfbf9;
color: #000000;
font-family: "Courier New", Courier;
font-size: 18px;
line-height: 1.7;
border: 1px black solid;
border-bottom: 1px black solid;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 1em;
padding-left: 1em;
width: 85%;
max-width: 700px;
margin: 20px;
}

Chapter 3: HTML

Chapter Text

Once you've created a work skin and have the CSS all copied and pasted, then you can get to the real work of putting together the HTML. That's what will go into the chapter text box for the new work on AO3, just make sure it's in HTML mode rather than Rich Text.

Set Up

So that the entire work is formatted like a Murdle, you will need the whole thing to be inside a main container like so:

[Everything, both text and html, should go in here. That includes the narrative, evidence, puzzle grid, and cards]

</div>

Evidence

You can write the narrative like you would any other fic.

When you're ready to present the evidence, that goes in its own little box:

<div class="card-small-name">
<p class="noMargin">
<u><span class="BlackColor">Evidence</span></u>
</p></div>

<ul class="noMargin">
<li>[This is how you create a bulleted list of clues.]</li>
<li>[You can put as many clues as you like here.]</li>
<li>[Notice the bold tags around the coded message: ]<b>I NKWO WOH ETH ILKELR SI</b>.</li>
<li><span class="CrimsonColor"><b>[This line will appear in red.]</b></span></li>
</ul>

</div>

Cards

I put the cards and gird side by side in one large table, so you'll want to set that up first. Alternatively, Grayswandir provides a bunch of alternate ways to organize the cards in their tutorial.

[All of the code for all of the cards goes in here.

The "card-med" class pads the cell so that the card isn't in the top left corner (you may need to adjust the padding a little in the work skin CSS to get it in the optimal position for your puzzle)]

</td>
<td>

[All of the code for the grid goes in here]

</td>
</tr>
</tbody>
</table>

If you want to have one card that "flips over" to reveal information about each of the suspects/weapons/locations/motives/etc... rather than putting them all side by side, then you will also need to put all of the cards inside a "story container" adapted from La_Temperanza's Choose Your Own Adventure work skin, and make each card its own "page".

[The first card, probably the card back, goes in here]

</div>

[The next card goes in here]

</div>

[You should have one page for each card]

</div>

Inside each page, you can then put the code for each card, starting with the card back.

You will have to customize the code for the card fronts with information about each of the suspects/weapons/locations/motives/etc...

<div class="card-text">
<p>[Description]</p>
</div>

<div class="card-stats">
<p class="noMargin">[Stats] • [Stats]</p>
</div>

</td></tr></tbody></table>
</div></div>

To change the color of the emoji, change the class of <span class="BlackColor"> to the desired color - there are a lot of options provided in the CSS.

The Grid

To make the grid interactive, you have to put a little story container inside each square, with a page for each icon. Make sure each square has a unique number.

</div>

Grayswandir has provided html templates for a variety of different grid types and sizes. Here's the basic grid structure that I used.

Wrap Up

When you're done, make sure you still have a div tag at the end to close the main tag from the beginning.

</div>

Go to the next chapter to see all the pieces together in a form you can copy-paste to use as a template for your own Murdle.

Chapter 4: HTML Template

Chapter Text

If you would prefer to just copy and paste the whole thing and tinker with it from there, this is the entire code for the example in chapter 1:

<p>Your introductory narrative goes here.</p>

<p>Each suspect brought one weapon to one location with one motive, but only one was the culprit (today).</p><div class="evidence">
<div class="card-small-name">

<p class="noMargin">
<u><span class="BlackColor">Evidence</span></u>
</p></div>
<ul class="noMargin">
<li>Here's a clue.</li>
<li>And another.</li>
<li>You can put as many clues as you like here.</li>
<li>You can even include coded messages: <b>I NKWO WOH ETH ILKELR SI</b>.</li>
<li><span class="CrimsonColor"><b>And you can put the final evidence of the actual crime in red.</b></span></li>
</ul>
</div>

<p class="noMargin"><span class="BlackColor">Suspect 1 Name</span></p></div>

<p>A little blurb about them.</p></div>
<div class="card-stats">

<p class="noMargin">stats • more stats</p></div>