-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathda7.html
2110 lines (1571 loc) · 462 KB
/
da7.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>da7</title>
<style title="Twine CSS">@keyframes appear{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out{0%,to{opacity:0}50%{opacity:1}}@keyframes rumble{25%{top:-0.1em}75%{top:0.1em}0%,to{top:0px}}@keyframes shudder{25%{left:0.1em}75%{left:-0.1em}0%,to{left:0px}}@keyframes buoy{25%{top:0.25em}75%{top:-0.25em}0%,to{top:0px}}@keyframes sway{25%{left:0.25em}75%{left:-0.25em}0%,to{left:0px}}@keyframes pulse{0%{transform:scale(0, 0)}20%{transform:scale(1.2, 1.2)}40%{transform:scale(0.9, 0.9)}60%{transform:scale(1.05, 1.05)}80%{transform:scale(0.925, 0.925)}to{transform:scale(1, 1)}}@keyframes zoom-in{0%{transform:scale(0, 0)}to{transform:scale(1, 1)}}@keyframes shudder-in{0%, to{transform:translateX(0em)}5%, 25%, 45%{transform:translateX(-1em)}15%, 35%, 55%{transform:translateX(1em)}65%{transform:translateX(-0.6em)}75%{transform:translateX(0.6em)}85%{transform:translateX(-0.2em)}95%{transform:translateX(0.2em)}}@keyframes rumble-in{0%, to{transform:translateY(0em)}5%, 25%, 45%{transform:translateY(-1em)}15%, 35%, 55%{transform:translateY(1em)}65%{transform:translateY(-0.6em)}75%{transform:translateY(0.6em)}85%{transform:translateY(-0.2em)}95%{transform:translateY(0.2em)}}@keyframes fidget{0%, 8.1%, 82.1%, 31.1%, 38.1%, 44.1%, 40.1%, 47.1%, 74.1%, 16.1%, 27.1%, 72.1%, 24.1%, 95.1%, 6.1%, 36.1%, 20.1%, 4.1%, 91.1%, 14.1%, 87.1%, to{left:0px;top:0px}8%, 82%, 31%, 38%, 44%{left:-1px}40%, 47%, 74%, 16%, 27%{left:1px}72%, 24%, 95%, 6%, 36%{top:-1px}20%, 4%, 91%, 14%, 87%{top:1px}}@keyframes slide-right{0%{transform:translateX(-100vw)}}@keyframes slide-left{0%{transform:translateX(100vw)}}@keyframes slide-up{0%{transform:translateY(100vh)}}@keyframes slide-down{0%{transform:translateY(-100vh)}}@keyframes fade-right{0%{opacity:0;transform:translateX(-1em)}to{opacity:1}}@keyframes fade-left{0%{opacity:0;transform:translateX(1em)}to{opacity:1}}@keyframes fade-up{0%{opacity:0;transform:translateY(1em)}to{opacity:1}}@keyframes fade-down{0%{opacity:0;transform:translateY(-1em)}to{opacity:1}}@keyframes flicker{0%,29%,31%,63%,65%,77%,79%,86%,88%,91%,93%{opacity:0}30%{opacity:0.2}64%{opacity:0.4}78%{opacity:0.6}87%{opacity:0.8}92%, to{opacity:1}}@keyframes blur{0%{filter:blur(2rem);opacity:0}25%{opacity:1}to{filter:blur(0rem);opacity:1}}.dom-debug-mode tw-story,.dom-debug-mode tw-passage,.dom-debug-mode tw-sidebar,.dom-debug-mode tw-include,.dom-debug-mode tw-hook,.dom-debug-mode tw-expression,.dom-debug-mode tw-link,.dom-debug-mode tw-dialog,.dom-debug-mode tw-columns,.dom-debug-mode tw-column,.dom-debug-mode tw-align{outline:1px solid #f5a3da;min-height:32px;display:block !important}.dom-debug-mode tw-story::before,.dom-debug-mode tw-passage::before,.dom-debug-mode tw-sidebar::before,.dom-debug-mode tw-include::before,.dom-debug-mode tw-hook::before,.dom-debug-mode tw-expression::before,.dom-debug-mode tw-link::before,.dom-debug-mode tw-dialog::before,.dom-debug-mode tw-columns::before,.dom-debug-mode tw-column::before,.dom-debug-mode tw-align::before{position:absolute;top:0;left:0;height:16px;background-color:#f5a3da;color:black;font-size:16px;font-weight:normal;font-style:normal;font-family:monospace;display:inline-block;line-height:100%;white-space:pre;z-index:999997}.dom-debug-mode tw-story:hover,.dom-debug-mode tw-passage:hover,.dom-debug-mode tw-sidebar:hover,.dom-debug-mode tw-include:hover,.dom-debug-mode tw-hook:hover,.dom-debug-mode tw-expression:hover,.dom-debug-mode tw-link:hover,.dom-debug-mode tw-dialog:hover,.dom-debug-mode tw-columns:hover,.dom-debug-mode tw-column:hover,.dom-debug-mode tw-align:hover{outline:1px solid #fc9}.dom-debug-mode tw-story:hover::before,.dom-debug-mode tw-passage:hover::before,.dom-debug-mode tw-sidebar:hover::before,.dom-debug-mode tw-include:hover::before,.dom-debug-mode tw-hook:hover::before,.dom-debug-mode tw-expression:hover::before,.dom-debug-mode tw-link:hover::before,.dom-debug-mode tw-dialog:hover::before,.dom-debug-mode tw-columns:hover::before,.dom-debug-mode tw-column:hover::before,.dom-debug-mode tw-align:hover::before{background-color:#fc9;transition:background-color 1s}.dom-debug-mode tw-passage,.dom-debug-mode tw-include,.dom-debug-mode tw-hook,.dom-debug-mode tw-expression,.dom-debug-mode tw-link,.dom-debug-mode tw-dialog,.dom-debug-mode tw-columns,.dom-debug-mode tw-column,.dom-debug-mode tw-align{padding:1em;margin:0}.dom-debug-mode tw-story::before{content:'<tw-story tags="' attr(tags) '">'}.dom-debug-mode tw-passage::before{top:-16px;content:'<tw-passage tags="' attr(tags) '">'}.dom-debug-mode tw-sidebar::before{top:-16px;content:"<tw-sidebar>"}.dom-debug-mode tw-hook::before{content:'<tw-hook name="' attr(name) '">'}.dom-debug-mode tw-expression::before{content:'<tw-expression name="' attr(name) '">'}.dom-debug-mode tw-link::before{content:'<tw-link name="' attr(name) '">'}.dom-debug-mode tw-dialog::before{content:"<tw-dialog>"}.dom-debug-mode tw-columns::before{content:"<tw-columns>"}.dom-debug-mode tw-column::before{content:"<tw-column>"}.dom-debug-mode tw-align::before{content:"<tw-align>"}.dom-debug-mode tw-include::before{content:'<tw-include type="' attr(type) '" name="' attr(name) '">'}.debug-mode tw-expression{display:inline-block !important}.debug-mode tw-expression[type=variable]::after{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"$" attr(name)}.debug-mode tw-expression[type=tempVariable]::after{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"_" attr(name)}.debug-mode tw-expression[return=boolean]{background-color:rgba(179,179,179,0.2)}.debug-mode tw-expression[return=array]{background-color:rgba(255,102,102,0.2)}.debug-mode tw-expression[return=dataset]{background-color:rgba(255,128,0,0.2)}.debug-mode tw-expression[return=number]{background-color:rgba(255,179,102,0.2)}.debug-mode tw-expression[return=datamap]{background-color:rgba(255,255,102,0.2)}.debug-mode tw-expression[return=changer]{background-color:rgba(179,255,102,0.2)}.debug-mode tw-expression[return=lambda]{background-color:rgba(102,255,102,0.2)}.debug-mode tw-expression[return=hookname]{background-color:rgba(102,255,204,0.2)}.debug-mode tw-expression[return=string]{background-color:rgba(102,255,255,0.2)}.debug-mode tw-expression[return=datatype]{background-color:rgba(102,153,255,0.2)}.debug-mode tw-expression[return=gradient],.debug-mode tw-expression[return=colour]{background-color:rgba(204,102,255,0.2)}.debug-mode tw-expression[return=instant],.debug-mode tw-expression[return=macro]{background-color:rgba(240,117,199,0.2)}.debug-mode tw-expression[return=command]{background-color:rgba(153,153,255,0.2)}.debug-mode tw-expression.false{background-color:rgba(255,0,0,0.2) !important}.debug-mode tw-expression[type=macro]::before{content:"(" attr(name) ":)";padding:0 0.5rem;font-size:1rem;vertical-align:middle;line-height:normal;background-color:inherit;border:1px solid rgba(255,255,255,0.5)}.debug-mode tw-hook{background-color:rgba(0,85,255,0.1) !important}.debug-mode tw-hook::before{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"["}.debug-mode tw-hook::after{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"]"}.debug-mode tw-hook[name]::after{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"]<" attr(name) "|"}.debug-mode tw-pseudo-hook{background-color:rgba(255,170,0,0.1) !important}.debug-mode tw-collapsed::before{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"{"}.debug-mode tw-collapsed::after{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"}"}.debug-mode tw-verbatim::before,.debug-mode tw-verbatim::after{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:"`"}.debug-mode tw-align[style*="text-align: center"]{background:linear-gradient(to right, rgba(255,204,189,0) 0%, rgba(255,204,189,0.25) 50%, rgba(255,204,189,0) 100%)}.debug-mode tw-align[style*="text-align: left"]{background:linear-gradient(to right, rgba(255,204,189,0.25) 0%, rgba(255,204,189,0) 100%)}.debug-mode tw-align[style*="text-align: right"]{background:linear-gradient(to right, rgba(255,204,189,0) 0%, rgba(255,204,189,0.25) 100%)}.debug-mode tw-column{background-color:rgba(189,228,255,0.2)}.debug-mode tw-enchantment{animation:enchantment 0.5s infinite;border:1px solid}.debug-mode tw-link::after,.debug-mode tw-broken-link::after{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:attr(passage-name)}.debug-mode tw-include{background-color:rgba(204,128,51,0.1)}.debug-mode tw-include::before{font-size:0.8rem;padding-left:0.2rem;padding-right:0.2rem;vertical-align:top;content:attr(type) ' "' attr(name) '"'}@keyframes enchantment{0%,to{border-color:#ffb366}50%{border-color:#6fc}}tw-debugger{position:fixed;box-sizing:border-box;bottom:0;right:0;z-index:999999;min-width:10em;min-height:1em;padding:0em 0.5em 0.5em 1em;font-size:1.25em;font-family:sans-serif;color:#000;border-left:solid #000 2px;border-top:solid #000 2px;border-top-left-radius:.5em;background:#fff;opacity:1}tw-debugger select{margin-right:1em;width:12em}tw-debugger button{border-radius:3px;border:solid #999 1px;margin:auto 4px;background-color:#fff;font-size:inherit;color:#000}tw-debugger button.enabled{background-color:#eee;box-shadow:inset #ddd 3px 5px 0.5em}tw-debugger .panel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;bottom:100%;left:-2px;right:0;padding:1em;max-height:40vh;overflow-y:scroll;overflow-x:hidden;z-index:999998;background:#fff;border:inherit;border-bottom:solid #999 2px;border-top-left-radius:.5em;border-bottom-left-radius:.5em;font-size:0.8em}tw-debugger .panel:empty,tw-debugger .panel[hidden]{display:none}tw-debugger .panel-source,tw-debugger .panel-row-source{font-family:monospace;overflow-x:scroll;white-space:pre;-ms-flex-preferred-size:100%;flex-basis:100%}tw-debugger .panel-row-source{margin:5px 0}tw-debugger .panel-rows{width:100%;overflow-x:scroll}tw-debugger .panel-rows>*{display:table-row}tw-debugger .panel-rows>div:nth-of-type(2n){background:#EEE}tw-debugger .panel-row-buttons{text-align:right}tw-debugger .panel-variables .panel-rows:empty::before{content:"~ No variables ~";font-style:italic;color:#888;text-align:center}tw-debugger .panel-enchantments .panel-rows:empty::before{content:"~ No enchantments ~";font-style:italic;color:#888;text-align:center}tw-debugger .panel-errors .panel-rows:empty::before{content:"~ No errors... for now. ~";font-style:italic;color:#888;text-align:center}tw-debugger .panel-rows:empty+.panel-variables-bottom{display:none}tw-debugger .panel-storylets:not(.panel-exclusive) .storylet-exclusive,tw-debugger .panel-storylets:not(.panel-urgent) .storylet-urgent{display:none}tw-debugger .panel-variables-bottom{padding-top:5px}tw-debugger .enchantment-row{min-height:1.5em}tw-debugger .variable-path{opacity:0.4}tw-debugger .temporary-variable-scope,tw-debugger .enchantment-local{font-family:sans-serif;font-weight:normal;opacity:0.8;font-size:0.75em}tw-debugger .temporary-variable-scope:not(:empty)::before,tw-debugger .enchantment-local:not(:empty)::before{content:" in "}tw-debugger .variable-name,tw-debugger .enchantment-name{font-family:monospace;font-weight:bold}tw-debugger .variable-type{color:#444;font-weight:normal;text-overflow:ellipsis;overflow:hidden;max-width:10em}tw-debugger .error-row{display:table-row;background-color:rgba(230,101,204,0.3)}tw-debugger .error-row:nth-of-type(2n){background-color:rgba(237,145,219,0.3)}tw-debugger .error-row>*{display:table-cell;padding:0.25em 0.5em}tw-debugger .error-row .error-message{cursor:help}tw-debugger .error-row .error-passage{color:#444}tw-debugger .storylet-row{background-color:rgba(201,233,222,0.3)}tw-debugger .storylet-row:nth-child(2n){background-color:rgba(128,203,178,0.3)}tw-debugger .storylet-row.storylet-closed{font-style:italic;opacity:0.4;background-color:rgba(217,217,217,0.3)}tw-debugger .storylet-row.storylet-closed:nth-child(2n){background-color:rgba(166,166,166,0.3)}.storylet-error tw-debugger .storylet-row{background-color:rgba(230,101,204,0.3)}.storylet-error tw-debugger .storylet-row:nth-child(2n){background-color:rgba(237,145,219,0.3)}tw-debugger .storylet-row .storylet-name,tw-debugger .storylet-row .storylet-value{display:inline-block;width:50%}tw-debugger .tabs{padding-bottom:0.5em}tw-debugger .tab{border-radius:0px 0px 0.5em 0.5em;border-top:none}tw-debugger .resizer{position:absolute;height:3em;border-left:2px solid #ccc;border-right:2px solid #ccc;top:10px;left:4px;width:8px;cursor:ew-resize}tw-dialog{z-index:999997;border:#fff solid 2px;padding:2em;color:#fff;background-color:#000;display:block}@media (min-width: 576px){tw-dialog{max-width:50vw}}tw-dialog input[type=text]{font-size:inherit;width:100%}tw-dialog-links{text-align:right;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}tw-backdrop{z-index:999996;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.8);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}tw-backdrop ~ tw-backdrop{display:none}tw-link,.link,tw-icon,.enchantment-clickblock{cursor:pointer}tw-link,.enchantment-link{color:#4169E1;font-weight:bold;text-decoration:none;transition:color 0.2s ease-in-out}tw-passage [style^="color"] tw-link:not(:hover),tw-passage [style*=" color"] tw-link:not(:hover),tw-passage [style^="color"][hover="true"] tw-link:hover,tw-passage [style*=" color"][hover="true"] tw-link:hover,tw-passage [style^="color"] .enchantment-link:not(:hover),tw-passage [style*=" color"] .enchantment-link:not(:hover),tw-passage [style^="color"][hover="true"] .enchantment-link:hover,tw-passage [style*=" color"][hover="true"] .enchantment-link:hover{color:inherit}tw-link:hover,.enchantment-link:hover{color:#00bfff}tw-link:active,.enchantment-link:active{color:#DD4B39}.visited{color:#6941e1}tw-passage [style^="color"] .visited:not(:hover),tw-passage [style*=" color"] .visited:not(:hover),tw-passage [style^="color"][hover="true"] .visited:hover,tw-passage [style*=" color"][hover="true"] .visited:hover{color:inherit}.visited:hover{color:#E3E}tw-broken-link{color:#993333;border-bottom:2px solid #993333;cursor:not-allowed}tw-passage [style^="color"] tw-broken-link:not(:hover),tw-passage [style*=" color"] tw-broken-link:not(:hover),tw-passage [style^="color"][hover="true"] tw-broken-link:hover,tw-passage [style*=" color"][hover="true"] tw-broken-link:hover{color:inherit}.enchantment-mouseover{border-bottom:2px dashed #999}.enchantment-mouseout{border:rgba(64,149,191,0.6) 1px solid}.enchantment-mouseout:hover{background-color:rgba(175,197,207,0.75);border:transparent 1px solid;border-radius:0.2em}.enchantment-clickblock{width:100%;height:100%;display:block}.enchantment-clickblock>:not(tw-enchantment)::after{content:"";width:100%;height:100%;top:0;left:0;display:block;box-sizing:border-box;position:absolute;pointer-events:none;color:rgba(65,105,225,0.5);transition:color 0.2s ease-in-out}.enchantment-clickblock>:not(tw-enchantment):hover::after{color:rgba(0,191,255,0.5)}.enchantment-clickblock>:not(tw-enchantment):active::after{color:rgba(222,78,59,0.5)}.enchantment-clickblock>:not(tw-enchantment)::after{box-shadow:inset 0 0 0 0.5vmax}.enchantment-clickblock>tw-passage::after,.enchantment-clickblock>tw-sidebar::after{box-shadow:0 0 0 0.5vmax}.enchantment-mouseoverblock>:not(tw-enchantment)::after{content:"";width:100%;height:100%;top:0;left:0;display:block;box-sizing:border-box;position:absolute;pointer-events:none;border:2px dashed #999}.enchantment-mouseoutblock>:not(tw-enchantment)::after{content:"";width:100%;height:100%;top:0;left:0;display:block;box-sizing:border-box;position:absolute;pointer-events:none;border:rgba(64,149,191,0.6) 2px solid}.enchantment-mouseoutblock:hover>:not(tw-enchantment)::after{content:"";width:100%;height:100%;top:0;left:0;display:block;box-sizing:border-box;position:absolute;pointer-events:none;background-color:rgba(175,197,207,0.75);border:transparent 2px solid;border-radius:0.2em}tw-link.enchantment-button,.enchantment-link.enchantment-button,.enchantment-button:not(.enchantment-link) tw-link,.enchantment-button:not(.enchantment-link) .enchantment-link{border-radius:16px;border-style:solid;border-width:2px;text-align:center;padding:0px 8px;display:block}tw-dialog-links{padding-top:1.5em}tw-dialog-links tw-link{border-radius:16px;border-style:solid;border-width:2px;text-align:center;padding:0px 8px;display:block;display:inline-block}html{margin:0;height:100%;overflow-x:hidden}*,:before,:after{position:relative;box-sizing:inherit}body{margin:0;height:100%}tw-storydata{display:none}tw-story{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font:100% Georgia, serif;box-sizing:border-box;width:100%;min-height:100%;font-size:1.5em;line-height:1.5em;padding:5% 5%;overflow:hidden;background-color:#000;color:#fff}tw-story [style*=content-box] *{box-sizing:border-box}@media (min-width: 576px){tw-story{padding:5% 20%}}tw-story tw-consecutive-br{display:block;height:1.6ex;visibility:hidden}tw-story select{background-color:transparent;font:inherit;border-style:solid;padding:2px}tw-story select:not([disabled]){color:inherit}tw-story textarea{resize:none;background-color:transparent;font:inherit;color:inherit;border-style:none;padding:2px}tw-story input[type=checkbox]{transform:scale(1.5);margin:0 0.5em}tw-story tw-noscript{animation:appear 0.8s}tw-passage{display:block}tw-sidebar{text-align:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}@media (min-width: 576px){tw-sidebar{left:-5em;width:3em;position:absolute;-ms-flex-direction:column;flex-direction:column}tw-enchantment[style*="width"]>tw-sidebar{width:inherit}}tw-icon{display:inline-block;margin:0.5em 0;font-size:66px;font-family:"Verdana",sans-serif}tw-icon[alt]{opacity:0.2}tw-icon[alt]:hover{opacity:0.4}tw-icon[data-label]::after{font-weight:bold;content:attr(data-label);font-size:20px;bottom:-20px;left:-50%;white-space:nowrap}tw-meter{display:block}tw-hook:empty,tw-expression:empty{display:none}tw-error{display:inline-block;border-radius:0.2em;padding:0.2em;font-size:1rem;cursor:help;white-space:pre-wrap}tw-error.error{background-color:rgba(223,58,190,0.6);color:#fff}tw-error.warning{background-color:rgba(223,140,58,0.6);color:#fff;display:none}.debug-mode tw-error.warning{display:inline}tw-error-explanation{display:block;font-size:0.8rem;line-height:1rem}tw-open-button,tw-folddown{cursor:pointer;line-height:0em;border-radius:1px;border:1px solid black;font-size:0.8rem;margin:0 0.4rem;padding:2px;white-space:pre}tw-folddown::after{content:"\25b6"}tw-folddown.open::after{content:"\25bc"}tw-open-button::after{content:"Open"}tw-notifier{border-radius:0.2em;padding:0.2em;font-size:1rem;background-color:rgba(223,182,58,0.4);display:none}.debug-mode tw-notifier{display:inline}tw-notifier::before{content:attr(message)}tw-colour{border:1px solid black;display:inline-block;width:1em;height:1em}tw-enchantment:empty{display:none}h1{font-size:3em}h2{font-size:2.25em}h3{font-size:1.75em}h1,h2,h3,h4,h5,h6{line-height:1em;margin:0.3em 0 0.6em 0}pre{font-size:1rem;line-height:initial}small{font-size:70%}big{font-size:120%}mark{color:rgba(0,0,0,0.6);background-color:#ff9}ins{color:rgba(0,0,0,0.6);background-color:rgba(255,242,204,0.5);border-radius:0.5em;box-shadow:0em 0em 0.2em #ffe699;text-decoration:none}center{text-align:center;margin:0 auto;width:60%}blink{text-decoration:none;animation:fade-in-out 1s steps(1, end) infinite alternate}tw-align{display:block}tw-columns{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}.transition-in{animation:appear 0ms step-start}.transition-out{animation:appear 0ms step-end}[data-t8n^=dissolve].transition-in,[data-t8n=fade].transition-in{animation:appear .8s}[data-t8n^=dissolve].transition-out,[data-t8n=fade].transition-out{animation:appear .8s reverse}[data-t8n^=shudder].transition-in{display:inline-block !important;animation:shudder-in .8s}[data-t8n^=shudder].transition-out{display:inline-block !important;animation:shudder-in .8s reverse}[data-t8n^=rumble].transition-in{display:inline-block !important;animation:rumble-in .8s}[data-t8n^=rumble].transition-out{display:inline-block !important;animation:rumble-in .8s reverse}[data-t8n^=pulse].transition-in{animation:pulse .8s;display:inline-block !important}[data-t8n^=pulse].transition-out{animation:pulse .8s reverse;display:inline-block !important}[data-t8n^=zoom].transition-in{animation:zoom-in .8s;display:inline-block !important}[data-t8n^=zoom].transition-out{animation:zoom-in .8s reverse;display:inline-block !important}[data-t8n^=blur].transition-in{animation:blur .8s;display:inline-block !important}[data-t8n^=blur].transition-out{animation:blur .8s reverse;display:inline-block !important}[data-t8n^=slideleft].transition-in{animation:slide-left .8s;display:inline-block !important}[data-t8n^=slideleft].transition-out{animation:slide-right .8s reverse;display:inline-block !important}[data-t8n^=slideright].transition-in{animation:slide-right .8s;display:inline-block !important}[data-t8n^=slideright].transition-out{animation:slide-left .8s reverse;display:inline-block !important}[data-t8n^=slideup].transition-in{animation:slide-up .8s;display:inline-block !important}[data-t8n^=slideup].transition-out{animation:slide-down .8s reverse;display:inline-block !important}[data-t8n^=slidedown].transition-in{animation:slide-down .8s;display:inline-block !important}[data-t8n^=slidedown].transition-out{animation:slide-up .8s reverse;display:inline-block !important}[data-t8n^=fadeleft].transition-in{animation:fade-left .8s;display:inline-block !important}[data-t8n^=fadeleft].transition-out{animation:fade-right .8s reverse;display:inline-block !important}[data-t8n^=faderight].transition-in{animation:fade-right .8s;display:inline-block !important}[data-t8n^=faderight].transition-out{animation:fade-left .8s reverse;display:inline-block !important}[data-t8n^=fadeup].transition-in{animation:fade-up .8s;display:inline-block !important}[data-t8n^=fadeup].transition-out{animation:fade-down .8s reverse;display:inline-block !important}[data-t8n^=fadedown].transition-in{animation:fade-down .8s;display:inline-block !important}[data-t8n^=fadedown].transition-out{animation:fade-up .8s reverse;display:inline-block !important}[data-t8n^=flicker].transition-in{animation:flicker .8s}[data-t8n^=flicker].transition-out{animation:flicker .8s reverse}
</style>
</head>
<body>
<tw-story><noscript><tw-noscript>JavaScript needs to be enabled to play da7.</tw-noscript></noscript></tw-story>
<tw-storydata name="da7" startnode="1" creator="Twine" creator-version="2.3.16" ifid="227A4110-0116-4CAB-835C-B3BE1BD7A146" zoom="1" format="Harlowe" format-version="3.2.3" options="" hidden><style role="stylesheet" id="twine-user-stylesheet" type="text/twine-css">tw-story { background-color: #E6EBC8;}
tw-passage {
color: black;
}
tw-passage {
font-family: Arial
}
tw-story[tags~="Twine"] {
background-image: ("images/twineimage.png");
background-size:cover;
}
#box
{
float: right;
width: 350px;
padding: 10px;
border: solid;
border-width: 5px;
border-radius: 10px;
border-color: #ffffff;
background: #ffffff;
}
#content
{
float: left;
width: 640px;
}
input, textarea {
color: #fff;
background-color: #111;
border: 1px solid #E6EBC8;
padding: .4em;
}
</style><script role="script" id="twine-user-script" type="text/twine-javascript"></script><tw-passagedata pid="1" name="Digital Art Curriculum" tags="Learning" position="160,7" size="100,100">#(text-color:#64A79B)+(text-style: "underline")[Digital Art Curriculum]
An ''interactive website'' to teach young adolescents about a form of digital art, interactive art.
A curriculum lesson plan made by Charlize Serrano a High School Senior
---
<style> img {
max-width:100%;
max-height:100%;
}
</style>
<img src="images/whatisdigitalart.png" />
<img src="images/digitalartphoto.jpg"/>
[[First Page (students go here)->Introduction + Learning Objectives]]
<span id="box">
(align:"==>")[(box:"X")[ [(text-colour:grey)[ [[Teacher Notes->Teacher Notes]]
[[Table of Contents->Table of Contents]]]]]
]
(enchant: "Digital Art Curriculum",
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1)
)
(enchant: "First Page (students go here)",
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B)))
(enchant: "Teacher Notes",
(background:#C1D2E7) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#C1D2E7) +
(border-size:1) +
(hover-style: (bg:#9EB6D6) + (border-color:#9EB6D6)))
(enchant: "Table of Contents",
(background:#C1D2E7) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#C1D2E7) +
(border-size:1) +
(hover-style: (bg:#9EB6D6) + (border-color:#9EB6D6)))
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans"))</tw-passagedata><tw-passagedata pid="2" name="What exactly is digital art? (exercise)" tags="" position="265,113" size="100,100">#Let's Begin Your Exploration,
(if: $Name is not 0)[Hello (print: $Name),]
(text-color:#64A79B)[''Respond to the following'']
''What do you think digital art is? ''Put your definition below.
(input-box:2bind $Definition,"X",5, "Double-click to type your definition")
[[Digital Art Definition and Why is it used?->Digital Art Definition and Why is it used?]]
(align:"=><=====")+(box:"=X")[[Back to Home Page->Digital Art Curriculum]]
(enchant:?link,
(background:#7EBDB2) +
(color:white) +
(border:'solid') +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)
(enchant:?passage,
(background:(white)) +
(corner-radius:20) +
(border:"solid")+
(border-size:3)+
(border-color:(white))
)</tw-passagedata><tw-passagedata pid="3" name="Twine" tags="Twine" position="200,365" size="100,100">Now with your personal journey of digital art you will be learning interactive art through...
#(text-color:#64A79B)[Twine]
Without needing the requirement of drawing, one's creativity is capable of shining through the software that is Twine.
* You will be using this software to specifially make story codes
* You may include art but that is not required
(checkbox: 2bind $drawing,"Do you have an interest in drawing?")
[[Here are some examples->Twine Examples]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="4" name="Twine Examples" tags="" position="54,387" size="100,100">#(text-color:#64A79B)[Here are some examples of games]
''Reminder:'' there might be audio on the websites.
<style> img {
max-width:100%;
max-height:100%;
}
</style>
[<img src='https://img.itch.zone/aW1hZ2UvNDA4MjIzLzIwMjY3NjQucG5n/original/4T26H5.png'>]<hook-name|
(click: ?hook-name)[(open-url: "https://natnatart.itch.io/plantgotchi")]
(link: "Plant Gotchi")[(open-url: "https://natnatart.itch.io/plantgotchi
")]
* a pixel art styled game where you take care of a tamagotchi that is a plant
[Copy if button above doesn't work https://natnatart.itch.io/plantgotchi]
[<img src='https://img.itch.zone/aW1hZ2UvNDA4NzA0LzIwMzMwOTMucG5n/original/vAo2fy.png'>]<hook-name|
(click: ?hook-name)[(open-url: "https://kryptickitty.itch.io/who-stole-my-bone")]
(link: "Who Stole My Bone?")[(open-url: "https://kryptickitty.itch.io/who-stole-my-bone")]
* a detective game where you help find a dog bone
[Copy if button above doesn't work https://kryptickitty.itch.io/who-stole-my-bone]
See how in every example, players and readers can make their own choices.
Look through these examples to see how they utilized Twine.
Link to Twine Games.
[[Time for a small activity!->Paper Fortune Teller Activity]]
(enchant: "Plant Gotchi",
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant: "Who Stole My Bone?",
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant: "Time for a small activity!",
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="5" name="Twine Basics + Basic Coding" tags="Learning" position="618,46" size="100,100">#Twine Basics
---
For what we will first be learning we will be covering the three Twine Basics that you need to utilize Twine.
* Creating Links
* Adding Images
* Publishing
Something Important to keep to mind.
Depending on what you need you will need basic coding.
This basic coding may also be used in HTML, another website coder.
The look of the website will be determined by CSS which could be used for any website creation.
[[Onto what we will be first learning...->Links: Most basic and most used button.]]
[[For more advancecd learners: If you would like to skip ahead to previous links...->Getting Your Twine Creation Started]]
(align:"=><=====")+(box:"=X")[[Back to Home Page->Digital Art Curriculum]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?passage,
(background:(white)) +
(corner-radius:20) +
(border:"solid")+
(border-size:3)+
(border-color:(white))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="6" name="Exercise (Notecards)" tags="" position="80,638" size="100,100">#(text-color:#64A79B)[NoteCard Activity]
Before getting to the actual production of the process you will be thinking up a couple of different stories
I want you to make an adventure decision story of vacations you have been on, except there is a twist... You will be adding a little bit of (text-style:"smear","sway")[imagination] to it.
* The events may follow events you had been through.
You will be making a couple of notecards for this activity.
For every note card you make you will have to write organize them by number from when you started.
Think up three different vacation spots and have choices for all of them.
On the back of the notecard you will put what notecard to go to next
(you may also do this activity with sticky notes -- grab sticky notes and put them on a piece of paper; draw lines of which sticky notes to go to)
[[Have you finished your note cards?-> Follow Up of Notecard Exercise]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)
</tw-passagedata><tw-passagedata pid="7" name="Making Decisions" tags="" position="346,502" size="100,100">#(text-color:#64A79B)[Why does this matter?]
Imagine you were creating a game with multiple endings.
Players face decisions of where they have to go all the time; for each path they take there is a result in their choices.
Interactive art is like this, ''how an audience places input on a piece of artwork there will be consequences in actions''.
(In a sense this is also like real life.)
[[Let's visualize this.->Exercise (Notecards)]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)
</tw-passagedata><tw-passagedata pid="8" name="What is Twine and Why Twine?" tags="" position="394,696" size="100,100">#(text-color:#64A79B)[What is Twine?]
---
Twine is an open source tool that allows storytelling and basic coding on either the browser or on a software.
''Why Twine?''
This software made back in 2009 proves to continue to be important today as it allows creativity for all audiences.
* Basics such as HTML coding and CSS coding are introduced in a basic and non-threatening way to early learners.
Twine allows for a truly interactive story.
Not only are people capable of creating a story, they are capable of coding movement in their ideas without necessarily the knowledge of coding.
[[How is this interactive?->How is this interactive?]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)
</tw-passagedata><tw-passagedata pid="9" name="Digital Art Definition and Why is it used?" tags="Learning" position="107,241" size="100,100">(align:"=><=====")+(box:"=X")[[Back to Home Page->Digital Art Curriculum]]
#(text-color:#64A79B)[What is Digital Art?]
---
Some may describe digital art as simply art that is made through a digital medium, but that description by itself does not describe digital art as a whole. Sure it invovles art but it is not defined by that artist or the medium that is used.
''Digital art''
* comes in a broad spectrum of mediums but its core comes from the messages of what the medium utilizes servers to deliver to the audience. It could be used to express messages of self-expression, political expression, etc.
It's modern use and feel allows artists to further relate to a modern people.
Realistically digital art can be used for anything. It is simply an expression of creativity displayed through modern mediums.
''Does this match your definition?''
(if:$Definition is 0)[* You forgot to answer, [[go back to the previous page->What exactly is digital art? (exercise)]].]
(else:)[* You answered "(print: $Definition)"]
(checkbox: 2bind $CheckMark1,"Mark when you finished reading.")
[[Here are some examples of careers.->Digital Art Career Paths]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="10" name="Links: Most basic and most used button." tags="Twine" position="751,22" size="100,100"># Links
<style> img {
max-width:100%;
max-height:100%;
}
</style>
---
What connects each decision and each web page, a link is the most basic and most used functions within Twine.
You will be using links to move between webpages.
This is the most used and most important part of Twine
* You will be organizing and thinking about the decisions you make frequently.
''How are these made?''
If you (text-style:"underline")[double-click] to select your box or press the pencil to edit the box that first shows up you are shown multiple items on top of a text editor.
If you click on link you will access how to create multiple web pages.
* You can either allow your readers to press a piece of text to go to the next page or the reader can go to the next page by clicking the entire page
If you type a passage name that does not exist a new passage will be made as soon as the link is added.
You can also add links with pre-existing passages.
* If you press the green button titled ''+Passage'' at the right corner of your screen you can make a new website.
* If you type the name of that new made passage on the "Go to this passage:" of the links you can access that passage through your link.
A shortcut to making this link is by typing:
<img src = "images/linkexample1.png" />
[[Now let's try it.->Link Exercise (5 questions)]]
(if:(history: where its name contains "Getting Your Twine Creation Started")'s length is 1)[[Go Back to Lessons->Getting Your Twine Creation Started]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="11" name="Publishing" tags="Twine" position="889,270" size="100,100"># Publishing
---
Now that you have a functional website,
you can already publish your website onto a domain to share your work.
''Some hosting domains include:''
* github
* itch.io
* Newgrounds
these will all support HTML files (HTML is a web page file, what you are making right now)
- if you want to find other types of domains to host your creation find one that allows (text-style:"buoy")[HTML support]
For this example we will be using Github to publish.
''Why Github?''
Unlike the other websites posted, you will have access to features used for those developing their website.
It does not matter whether you have a finished project.
You can easily go back to your old files!
* However, itch.io and Newgrounds provide great advertisement for your games!
---
''How to Publish on Github''
You will be creating an account on github first of all.
* Keep this professional, your website domain may be your github username for easy access.
''Steps:''
1. Download the actual github desktop.
2. Create a reposititory --something along the lines of firstnamelastname.github.io
* a repository is where your files will be stored
3. Go to the Repository tab at the top of the GitHub Desktop and press ''Show in Explorer'' located in the drop down menu
* This is where you will import all of your folders
* Every time you update your files you will have to copy the files into the ''Show in Explorer''
* After doing so you will be required to write a summary at the buttom -- a short name is fine.
* You will then commit to main and push origin.
Your files are now posted to Github!
To play the file you will have to go onto the broswer version of Github and copy and paste the file name at the top and put it into your browser.
[[Your Turn!->Show us what you have made! (Activity)]]
(if:(history: where its name contains "Getting Your Twine Creation Started")'s length is 1)[[Go Back to Lessons->Getting Your Twine Creation Started]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="12" name="Examples of Digital Art" tags="" position="400,238" size="100,100">#(text-color:#64A79B)[Examples of Digital Art]
If you would like more information I have linked the artists below the artwork.
---
<style> img {
max-width:100%;
max-height:100%;
}
</style>
<img src = "images/digitalartmuseum.jpeg" />
<img src = "images/yayoi-kusama-art-4-gary-zalatan.jpg" />
''Websites to Browse:''
<img src = "https://borderless.teamlab.art/images/pc-l/14590" />
(link: "Borderless TeamLab Museum")[(open-url: "https://borderless.teamlab.art/")]
(text-style:"superscript")
[Copy if button above doesn't work https://borderless.teamlab.art/]
* Note: You should check out the (text-style:"underline")[Artist's Thoughts] for insight of the museums.
(link: "DAM Museum")[(open-url: "https://dam.org/museum//")]
(text-style:"superscript")[Copy if button above doesn't work https://dam.org/museum/]
* Note: You should check out (text-style:"underline")[Essays], documenters cover interesting art topics.
(link: "Eden Gallery")[(open-url: "https://www.eden-gallery.com/
")]
(text-style:"superscript")[Copy if button above doesn't work https://www.eden-gallery.com/]
* Note: You should check out (text-style:"underline")[Collections], they list a wide range of specific types of mediums.
''Response Question: Check out the following links and research images. Describe which pieces or mediums spoke the most to you.''
* Challenge: Discuss a particular piece of artwork.
(input-box:2bind $DigitalArtInterests,"X",5, "Double-click and explain What interested you?")
[[Which types of Digital Art are you interested in?->Which Types of Digital Art are you Interested in?]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)
</tw-passagedata><tw-passagedata pid="13" name="Extra Learning" tags="" position="1580,572" size="100,100"># Extra Learning Items
Now that you have learned the basics of Twine. You can further learn how to make your website user friendly utilizing the following tutorials.
These tutorials will be completely optional if you want to learn further.
Time to make your story pop!
[[Macros->Advanced Macros]]
[[Color Changing->Color Changing]]
[[Designing Your Website->Advanced CSS]]
[[Story Formats->Story Formats]]
[[Embedding Files->Adding Embedded Items]]
[[Continue Onwards!->Things You Can Add onto Your Twine Creation]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="14" name="Extra Resources" tags="" position="2258,635" size="100,100">For extra research on specific items here are some example of tutorials.
[[Go Back->What have you learned as a result?]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="15" name="Advanced Macros" tags="" position="1810,429" size="100,100">Otherwise considered as shortcuts, macros are </tw-passagedata><tw-passagedata pid="16" name="Digital Art Career Paths" tags="" position="258,234" size="100,100">#(text-color:#64A79B)[Examples of Digital Art]
<img src = "https://www.designyourway.net/blog/wp-content/uploads/2017/11/115435-636099723929049668-1.jpg" />
Some examples of digital art career paths include --
* Digital Painter (
* 3D Modeler (
* Web Designer (
* Graphic Designer (
* UI/UX Designer (Designing how people interact with website or games)
Here is a website that goes further into depth on the topic of digital art career paths.
(link: "Digital Art Careers")[(open-url: "https://theartcareerproject.com/digital-art-careers/")]
https://theartcareerproject.com/digital-art-careers/
In this curriculum students will be capable of learning about the production that a designer might do but on a much simpler way.
[[Here are what some digital artists have made.->Examples of Digital Art]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="17" name="Color Changing" tags="Maybe-not-add" position="1573,400" size="100,100"># Color Changing
Want to learn how to further change the colors</tw-passagedata><tw-passagedata pid="18" name="Advanced CSS" tags="" position="1705,353" size="100,100">Do you need a more comprehensive guide to changing your website style?
Look no further than CSS
or rather...
Cascading Style Sheets</tw-passagedata><tw-passagedata pid="19" name="Inputs" tags="" position="807,687" size="100,100"># Inputs
What might be stored within a variable
---
Inputs are important as creators can keep track of what player's have inputted.
What a player has inputted can be referenced again so long as that input is ''binded to a variable''.
When selecting input we are given the following options:
* to make a player type a certain text (which we can store) -- we can also force them to type text
* have a player choose from a list of items shown in a dropdown menu (we can store which item they chose)
* show a dialog box
For each option you are capable of either leaving the input by itself or binding it to a type of variable.
* By binding it to a variable you are able to get access to what the player has inputted
[[Practice!->Input Exercise#1]]
(if:(history: where its name contains "Getting Your Twine Creation Started")'s length is 1)[[Go Back to Lessons->Getting Your Twine Creation Started]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="20" name="Variables" tags="" position="799,440" size="100,100"># Variables
---
What exactly are variables?
Variables are items that takes place of quantities and can be used for specific actions.
* In a code you are able to manipulate a variable and affect its data.
Variables store values within themselves. You will be naming these variables in order to store information.
These values may be called are changed with programs of code.
We will cover these codes later.
* Keep in mind: Data that you want to change will always be binded to a variable
* Aim to keep your variable names short to lessen confusion and easily revise actions
Within Twine, variables can also be deemed as temporary (only held within one link).
* This is useful as you may use variables with similar names or you may find it less clunky to have less variables used all throughout the passage.
Temporary variables are read with a ''_'' while non-temporary variables are read as ''$''.
Variables may also come in different types. Your main ones to focus on include:
* Text String: a piece of text that could be stored, changed, or inputted
* Number: a number value that could be stored, changed, or inputted (this could be inputted by drop down inputs as well--covered later)
* Boolean value: a 0 and 1 value that is a representation of 'false' and 'true'
* Colour: a color value to store
More Advanced Items (these will not be used for right now):
* Array: a storage of numbers that can be changed
* Datamap: a storage of text
Read if you want more information: Upon using Twine more often, variables will range based on the story format--you do not need to worry about this as you are only using Harlowe for this exercise)
(link: "Check out this link for more information")[(open-url: "https://damonwakes.wordpress.com/2018/01/24/twine-for-beginners-using-variables/
")]
(text-style:"superscript")
[Copy if button above doesn't work https://damonwakes.wordpress.com/2018/01/24/twine-for-beginners-using-variables/
]
[[Let's get first-hand experience->Variable Exercise #1]]
(if:(history: where its name contains "Getting Your Twine Creation Started")'s length is 1)[[Go Back to Lessons->Getting Your Twine Creation Started]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)</tw-passagedata><tw-passagedata pid="21" name="Things You Can Add onto Your Twine Creation" tags="" position="1591,782" size="100,100">[[For images...->Image Editing]]
[[For Videos...->Video Editing]]
[[Let's Continue->Advice]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="22" name="Image Editing" tags="" position="1600,933" size="100,100">Images do not have to look as simple as you think in your website. You are also capable of exploring software options for image editing.
[[Go Back->Things You Can Add onto Your Twine Creation]]</tw-passagedata><tw-passagedata pid="23" name="Video Editing" tags="" position="1742,856" size="100,100">While not required you can involve videos into your creation.
[[Go Back->Things You Can Add onto Your Twine Creation]]</tw-passagedata><tw-passagedata pid="24" name="Interactive Art Introduction" tags="Learning" position="337,382" size="100,100">#(text-color:#64A79B)[What Type of Art are We Looking At?]
With our journey in digital art we will be venturing in the most basic form of ''Interactive Art''.
---
Interactive Art is an art form that takes into consideration how the audience will interact with a piece.
* This can come in the shape of a website, game, or simply an interactive piece, etc.
''Do not worry if you lack interest in interactive art,'' this will serve as an introduction to the world of graphic design, game design, coding, etc.
We may even cover subtopics.
(if:$Interactive is true)[* But I guess we do not need to worry since ''you'' already have an interest in interactive art!]
[[What software will we be using?->Twine]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)
(enchant:?page,
(text-color:black)+
(background:(gradient: 160, 0,#E6EBC8,1,#C1D2E7,1,#F8F7FF))+
(font:"Open Sans")
)
</tw-passagedata><tw-passagedata pid="25" name="Opportunities of Digital Art" tags="" position="2093,464" size="100,100">As you can see there are several opportunities that digital art allows for
[[Here are some free resources to learn other types of digital art->Free Digital Art Sources]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="26" name="Challenges and Alternatives to Twine" tags="" position="2094,336" size="100,100">''...Surely through your exploration of Twine you have encountered difficulty in some way''
(text-style:"italic","underline")[Challenges and Alternatives to Twine]
Overtime as you begin to use Twine more often you may realize that a big challenge to Twine is that it does not allow the creation that all may hope for.
(text-style:"superscript")[Codes will not always work as they are intended to. ]
In order to make a proper book, one has to make multiple links which gives more work to storytellers.
* Game developers may find difficulty in the coding tools that Twine has to offer.
*Organization takes up a large part in Twine which makes production last longer.
* In short there is not much ''variety'' offered in Twine.
=|=
''Alternatives to Twine''
* For Game Designers
* For Web Designers
=|=
''Softwares''
* Game Maker
|==|
[[Opportunities of Digital Art->Opportunities of Digital Art]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="27" name="Basic Knowledge Correlations" tags="" position="566,562" size="100,100">#Do not panic
Twine is (text-style:"buoy")[INCREDIBLY] similar to other documentation sites
- Google Docs
- Word
If you have used any engine to write a paper you would definitely recognize the styles listed at the top of the UI when editing.
''Bold, Italicize, Header, Bullet Points, Numbering, Paragraph Alignment''
A simple click on these buttons will get the job done for a simple story and for basic use.
We will get into extra commands on how to access these as well in later links but for now you can just click on them.
* The same keyboard shortcuts as google docs and word will not work the same on Twine
* Twine is moreso similar to HTML except with more accessibility to the public
* Twine does use HTML codes with the use of (<___>)
Something a little more advanced but not complicated is Styles which changes how the words look. An example of how they will turn out is in the same text.
Do not worry if Twine may look complicated, a lot of it's interface is already descripted for the most part.
[[Now, what exactly are we looking at?!->The Interface of Twine]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="28" name="Interactive Story Example" tags="" position="362,837" size="100,100"># Here are examples of interactive stories outside of Twinery resources.
* Keep in mind, there might be audio...
(link: "Les Debuts De L Aventure")[(open-url: "https://noel.heschung.com/en/chapitre/les-debuts-de-l-aventure/")]
* A story showcasing the dates of important events within a man's life.
(link: "Tarot Bot")[(open-url: "https://tarotobot.illo.tv/")]
* A website that determines tech and design trends for the future using tarot cards.
Notice the similarities between this and Twine, while you probably will not have enough to put that much detail in the visual area (you could try to if you want), it's interaction is very similar to Twine.
How you are selecting buttons and interacting with the site to move is a basic of Twine.
[[Are you ready to see what you will be making?->Introduction of Final Prompt]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="29" name="The actual code and formatting" tags="" position="619,196" size="100,100"><style> img {
max-width:100%;
max-height:100%;
}
</style>
<img src = "images/twinestartingimage1.png"/>
See how when you first open the software you get a blank screen and a singular box.
That singular box will carry the rest of your project together.
What you will be creating in Twine is a virtual ''flowchart''.
<img src = "images/twinestartinglinks1.png"/>
You are free to organize your flowchart in any way you see fit.
To guide you, you are advised to ensure that your flowchart is organized based on how students will engage with your creation.
[[Twine Basics->Twine Basics + Basic Coding]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)</tw-passagedata><tw-passagedata pid="30" name="The Looping Process" tags="" position="792,989" size="100,100">The actual decision making...
You've got your information down now for how is this going to look all together.
[[Time for an exercise->Looping Exercise #1]]</tw-passagedata><tw-passagedata pid="31" name="How is this interactive?" tags="" position="234,851" size="100,100">#(text-color:#64A79B)[How is this Interactive?]
---
Not exactly a game sort of deal..
Audiences can explore their multiple choices and interact with the art given to them.
See if you use this drop down, until you find the correct number, "Correct" Appears
(dropdown: 2bind $numbers,"1","2","3","4","5","6")
(set: _correct to "Correct")
(if:$numbers is 4)(print: _correct)
See for example no matter what you type in this input, my code will force a certain sentence. Try typing.
into...
(force-input-box:"=XX=","I'm making you type this. Are you scared yet? You're still typing? Really? Press the next button please.")
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))
)[[Let's check out further examples, outside of Twine.->Interactive Story Example]]</tw-passagedata><tw-passagedata pid="32" name="Show us what you have made! (Activity)" tags="" position="1043,267" size="100,100">#What have you made?
Post all your creations using Github.
[[If you need help->Publishing]]
''Provide the website down below.''
(input-box:2bind $Creation,"X","Double-Click to Insert URL")
[[Continue->Short Show and Tell Activity]]
(enchant:?link,
(background:#7EBDB2) +
(border:'solid') +
(color:white) +
(corner-radius: 12) +
(border-color:#7EBDB2) +
(border-size:1) +
(hover-style: (bg:#64A79B) + (border-color:#64A79B))