<style>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;
}
.div1 {
grid-column-start: 2;
grid-row-start: 1;
}
</style>
<div class="parent">
<div class="div1">THE ANSWER
a short story
by Fredric Brown, 1954
adapted to Twine
by Carl Diehl, 2025
[[BEGIN|A]]</div>
</div>
<style>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 13px;
}
.div1 {
grid-column: span 2 / span 2;
}
.div2 {
grid-row: span 2 / span 2;
grid-column-start: 1;
grid-row-start: 2;
}
</style><div class="parent">
<div class="div1">Dwar Ev ceremoniously soldered the final connection with gold</div>
<div class="div2">[img[https://clogosphere.neocities.org/if/pa/img/answer-01.png][B]]</div>
</div>
<style>
.parent {
display: grid;
grid-template-columns: 25%;
grid-template-rows: 50%;
gap: 8px;
}
.div1 {
grid-column: span 5 / span 5;
grid-row: span 2 / span 2;
}
.div2 {
grid-row-start: 2;
}
.div3 {
grid-column-start: 3;
grid-row-start: 2;
}
.div4 {
grid-column-start: 5;
grid-row-start: 2;
}
.div5 {
grid-column: span 3 / span 3;
grid-row: span 2 / span 2;
grid-column-start: 1;
grid-row-start: 1;
}
</style>
<div class="parent">
<div class="div5">The eyes of a dozen television cameras watched him and the subether bore throughout the universe a dozen pictures of what he was doing.</div>
<div class="div2">[img[https://clogosphere.neocities.org/if/pa/img/answer-03b.png][C]]</div>
<div class="div3">[img[https://clogosphere.neocities.org/if/pa/img/answer-02b.png][C]]</div>
<div class="div4">[img[https://clogosphere.neocities.org/if/pa/img/answer-02b.png][C]]</div>
</div>
<style>
.wrapper {
display: flex;
}
img {
flex: 0 0 50%;
margin: 0 20px 20px 0;
float: left;
}
p {
flex: 1;
margin: 0;
text-align: justify;
}
</style><div class="wrapper">
[img[https://clogosphere.neocities.org/if/pa/img/answer-06.png][D]]He straightened and nodded to Dwar Reyn, then moved to a position beside the switch that would complete the contact when he threw it.The switch that would connect, all at once, all of the monster computing machines of all the populated planets in the universe -- ninety-six billion planets -- into the supercircuit that would connect them all into one supercalculator, one cybernetics machine that would combine all the knowledge of all the galaxies
</div>
<style>
.parent {
display: grid;
grid-template-columns: 15%);
grid-template-rows: 50%;
gap: 8px;
}
.div1 {
grid-row: span 2 / span 2;
}
.div2 {
grid-row: span 2 / span 2;
grid-column-start: 3;
grid-row-start: 2;
}
.div3 {
grid-column: span 2 / span 2;
grid-column-start: 4;
grid-row-start: 1;
} </style>
<div class="parent">
<div class="div1">Dwar Reyn spoke briefly to the watching and listening trillions. Then after a moment's silence he said, "Now, Dwar Ev."Dwar Ev threw the switch. There was a mighty hum, the surge of power from ninety-six billion planets. Lights flashed and quieted along the miles-long panel.</div>
<div class="div3">[img[https://clogosphere.neocities.org/if/pa/img/answer-08.png][E]]</div>
</div>
<style>
.parent {
display: grid;
grid-template-columns: 10%;
grid-template-rows: 15%;;
gap: 8px;
}
.div1 {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
grid-column-start: 2;
grid-row-start: 4;
}
.div2 {
grid-column-start: 5;
grid-row-start: 1;
}
.div3 {
grid-column-start: 5;
grid-row-start: 3;
}
</style><div class="parent">
<div class="div1">Dwar Ev stepped back and drew a deep breath. "The honor of asking the first question is yours, Dwar Reyn."
</div>
<div class="div2">"Thank you," said Dwar Reyn. "It shall be a question which no single cybernetics machine has been able to answer." He turned to face the machine.
</div>
<div class="div3">[img[https://clogosphere.neocities.org/if/pa/img/answer-10.png][F]]</div>
</div>
<style>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 13px;
}
.div1 {
grid-column: span 2 / span 2;
grid-column-start: 3;
grid-row-start: 4;
}
.div2 {
grid-row: span 2 / span 2;
grid-column-start: 1;
grid-row-start: 1;
}
</style><div class="parent">
<div class="div1">"Is there a God?"</div>
<div class="div2">[img[https://clogosphere.neocities.org/if/pa/img/answer-04.png][G]]</div>
</div>
<style>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;
}
.div1 {
grid-column-start: 2;
grid-row-start: 1;
}
</style>
<div class="parent">
<div class="div1"> <center>The mighty voice answered without hesitation, without the clicking of a single relay. </center>
[img[https://clogosphere.neocities.org/if/pa/img/answer-07.png][H]]
</div>
</div>
<style>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;
}
.div1 {
grid-column-start: 2;
grid-row-start: 1;
}
</style>
<div class="parent">
<div class="div1"> <center> "Yes, now there is a God."
</center>
[img[https://clogosphere.neocities.org/if/pa/img/answer-07.png][I]]
</div>
</div>
<style>
.parent {
display: grid;
grid-template-columns: 25%;
grid-template-rows: 50%;
gap: 8px;
}
.div1 {
grid-column: span 5 / span 5;
grid-row: span 2 / span 2;
}
.div2 {
grid-row-start: 2;
}
.div3 {
grid-column-start: 3;
grid-row-start: 2;
}
.div4 {
grid-column-start: 5;
grid-row-start: 2;
}
.div5 {
grid-column: span 3 / span 3;
grid-row: span 2 / span 2;
grid-column-start: 1;
grid-row-start: 1;
}
</style>
<div class="parent">
<div class="div5">Sudden fear flashed on the face of Dwar Ev. He leaped to grab the switch.</div>
<div class="div2">[img[https://clogosphere.neocities.org/if/pa/img/answer-15b.png][J]]</div>
<div class="div3">[img[https://clogosphere.neocities.org/if/pa/img/answer-14b.png][J]]</div>
<div class="div4">[img[https://clogosphere.neocities.org/if/pa/img/answer-16b.png][J]]
</div><style>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;
}
.div1 {
grid-column-start: 2;
grid-row-start: 1;
}
</style>
<div class="parent">
<div class="div1"> <center>A bolt of lightning
from the cloudless sky
struck him down and
fused the switch shut.</center>
[img[https://clogosphere.neocities.org/if/pa/img/answer-17.png][final]]
</div>
</div>
But what became of Dwar Ev and the Machine after this dramatic scene? Find out about them by clicking on their pictures below!
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://clogosphere.neocities.org/if/pa/img/answer-13.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="" title="" data-passage="dwar-ev" coords="98,103,205,240" shape="rect">
<area target="" alt="" title="" data-passage="machine" coords="259,99,343,168" shape="rect">
</map><style>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;
}
.div1 {
grid-column-start: 2;
grid-row-start: 1;
}
</style>
<div class="parent">
<div class="div1">The Machine ruled over humankind until the next election. At that point it was voted out of office and succeeded by a humble chatbot.
[[learn about Dwar Ev?|dwar-ev]]
[[or back to start|start]]</div>
</div>
<style>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;
}
.div1 {
grid-column-start: 2;
grid-row-start: 1;
}
</style>
<div class="parent">
<div class="div1">Dwar Ev lost his job. He pivoted to a life-long hobby of fly-fishing. He launched a successful second career as a fly-fishing influencer.
[[learn about the Machine?|machine]]
[[or back to start|start]]</div>
</div>
Dear fellow Twine-designers -- if you click on "Test from Here" you'll be able to access the websites i've included below. Anyhow, here are some notes for you:
I used a combination of:
CSS Grid Generator: https://cssgridgenerator.io/
Layouts 4 U templates: https://clogosphere.neocities.org/if/Layouts4U
to create different types of grid-like layouts of text and image. You should feel free to copy and reuse the CSS and HTML in this very Twine story for your own Twines
In the "final" passage I used an image map -- meaning different parts of one image can link to distinct passages in Twine! There is a tutorial pdf in Canvas course resources to adapt for use with Twine, and here is the website I used to create the initial image-map:
https://www.image-map.net/
I also use Google Webfonts. This CSS goes in the #Stylesheet (in your Story Tab) w/ corresponding tags on passages -- there is a tutorial PDF on Canvas course resources on how to incorporate into Twine
https://fonts.google.com/
I also got rid of the sidebar. Do that by going to { }Javascript (also in Story tab) and type or simply copy/paste the following:
UIBar.destroy()
My laptop is very low on storage and I couldn't run Photoshop to resize images :(
I found this free browser-based alternative that achieves the same sort of functionality for resizing and exporting as the Export As output in Photoshop:
https://imageresizer.com/bulk-resize