RandomWebsite1/mopdle_create.html at main · jatloe/RandomWebsite1 · GitHub

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
<!DOCTYPE html>
<html>
    <head>
        <link rel="icon" href="jatloesmile-hd.png">
        <title>MOPdle</title>
        <style>
            body {
                width: 99%;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }

            p,select,button,input {
                font-size: 18pt;
            }

            input {
                width: 80vw;
            }

            .title-area {
                text-align: center;
            }

            .hint-entering {
                text-align: center;
            }

            .hint-entering * {
                display: inline;
            }
        </style>
    </head>
    <body>
        <div class="title-area">
            <h1>MOPdle Creation</h1>
            <h3>(Check below for guidelines)</h3>
        </div>

        <div class="hint-entering">
            <p>Hint 1:</p>
            <input type="text" id="hint1">
        </div>

        <div class="hint-entering">
            <p>Hint 2:</p>
            <input type="text" id="hint2">
        </div>

        <div class="hint-entering">
            <p>Hint 3:</p>
            <input type="text" id="hint3">
        </div>

        <div class="hint-entering">
            <p>Hint 4:</p>
            <input type="text" id="hint4">
        </div>

        <div class="hint-entering">
            <p>Hint 5:</p>
            <input type="text" id="hint5">
        </div>

        <br>

        <div class="hint-entering">
            <p>Your name: </p>
            <select name="guess" id="guess"></select>
            <button type="button" onclick="submit_form()">Submit</button>
        </div>

        <br><br>

        <div class="title-area">
            <h2>Guidelines:</h2>
            <p>The hints should generally be specific enough. You want the player's reaction when seeing the first clue to be "what the heck is that" instead of, say, "bro that applies to like half the moppers".</p>
            <p>You should maintain a very visible difficulty curve. A person who does not know it is you, upon seeing the clues, should be able to sort them in the order you did without much trouble.</p>
            <p>In particular, make the last two clues easy enough that the proportion of X/5's is less than 10%.</p>
            <p>Please <b>do not tell me that you wrote a MOPdle</b> if you wrote one about yourself! The MOPdle is anonymously sent to me so that I can testsolve it blind.</p>
        </div>
    </body>
    <script>
        window.onload = () => {
            let name_list = ['Grant Blitz', 'Krittika Chandra', 'Ryan Chen', 'Kailua Cheng', 'Ashen Chutinan', 'Lanie Deng', 'Jonathan Du', 'Evan Fan', 'Yoll Feng', 'David Fox', 'Hannah Fox', 'Rohan Garg', 'Daniel Ge', 'Selena Ge', 'Vihaan Gupta', 'Darren Han', 'Eden He', 'Leo Hong', 'Shihan Kanungo', 'Keshav Karumbunathan', 'Ekam Kaur', 'Hyun-Jin Kim', 'Jason Lee', 'Connor Leong', 'Wendy Leong', 'Xinyi Li', 'Hengrui Liang', 'Andrew Lin', 'Kyle Lin', 'Alexander Liu', 'Jiahe Liu', 'Kevin Long', 'Tony Lu', 'Michael Luo', 'Rohan Mallick', 'Grisham Paimagam', 'Aryan Raj', 'Tarun Rapaka', 'Liam Reddy', 'Ian Rui', 'Drake Tan', 'Lingfei Tang', 'Aaryan Vaishya', 'Ari Wachtel', 'Alexander Wang', 'Calvin Wang', 'Heather Wang', 'Laura Wang', 'Oron Wang', 'Richard Wang', 'Ryan Wang', 'Vincent Wang', 'Kyle Wu', 'Catherine Xu', 'Channing Yang', 'Kevin Yang', 'Royce Yao', 'Feodor Yevtushenko', 'Ali Zaman', 'Tiger Zhang', 'Michael Zhao', 'Vivian Zhong', 'Haofang Zhu', 'Raymond Zhu', 'Eric Zou'];
            for (let name of name_list) {
                let node = document.createElement("option");
                let textnode = document.createTextNode(name);
                node.appendChild(textnode);
                node.value = name;
                document.getElementById("guess").appendChild(node);
            }
        }

        function submit_form() {
            let themap = {
                "day": "-1",
                "answer": document.getElementById("guess").value,
                "hint1": document.getElementById("hint1").value,
                "hint2": document.getElementById("hint2").value,
                "hint3": document.getElementById("hint3").value,
                "hint4": document.getElementById("hint4").value,
                "hint5": document.getElementById("hint5").value
            };
            let tosend = window.btoa(JSON.stringify(themap));

            let payload = {
                username: "MOPdle Form",
                content: tosend
            }

            // Please don't spam this webhook
            fetch("https://discord.com/api/webhooks/1460393751020306545/i74CljXF75MNz3UN6U2W7HitZaXhyBYbwukDHQAOHCiv54zObwwcyOebK9yUqBzYdUzm",{
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(payload),
            }).then(response => {
                alert(response.ok ? "Submitted!" : "Submission failed! Try submitting again?");
            });
        }
    </script>
</html>

<!--
Reminder to self:
window.btoa(JSON.stringify({"day":"0","answer":"","hint1":"","hint2":"","hint3":"","hint4":"","hint5":""}))
-->