wordpressを使わないでちょっと簡単に謎解きサイトを作る方法

上記の方法だと、詳しい人がブラウザで解析することが可能であることを教えていただいたので、解析できないやり方を書きます。少し複雑になりますが、一からプログラミングを覚えるよりは簡単だと思います。

①Wixで新しいサイトを作成

今回はシンプルに「白紙テンプレート」で作成します。

②開発者モードを有効にする
編集画面で、上部の「Dev mode」を選択＞「開発モードを有効にする」
ビデオの再生画面が出てくるので「いますぐはじめる」

③謎を作る
画像やテキストを貼り付けて謎を作りましょう
※JavaScriptやCSSなどを使った凝ったページが作りたい場合には、他のサイトで作成して、解答フォームだけをこの方法で作るほうが楽です。

④解答フォームを作る
「追加」＞「入力欄」＞「テキスト」
「追加」＞「ボタン」
それぞれのID（#で始まるもの）を覚えておきましょう。
ここでは、入力欄が#input1 、解答ボタンが#button1として進めます。

⑤解答判定を作る＜Backend＞
左側のナビゲーターウィンドウから「Backend」＞「新規Webモジュールを追加」して、名前をanswer.jswとします。
中身は全部消して、下記のコードに書き換えてください。
※解答はそれぞれのサイトごとにアレンジしてください。

export function answerCheck(answer) {
	if(answer === 'オリゴ糖'){
		//正解のURLを書きます
		return 'https://www.yahoo.co.jp'
	//別解がなかったら、ここからの部分を削除。別解を複数作りたかったら、ここからの部分を複製
	} else if(answer === 'ジョイマン') {
		//別解のURLを書きます
		return 'https://www.google.com'
	//別解がなかったら、ここまでの部分を削除。別解を複数作りたかったら、ここまでの部分を複製
	} else {
		//失敗のURLを書きます
		return 'https://twitter.com'
	}
}

⑥解答判定を作る＜ホームページコード＞
Wixの「ホームページコード」に、下記のように書きます。

import wixLocation from 'wix-location';
import {answerCheck} from 'backend/answer.jsw'

$w.onReady(function () {
	$w('#button1').onClick( (event) => {
		answerCheck($w('#input1').value)
		.then(function(result){
			wixLocation.to(result)
		})
	});
});

⑥公開

「プレビュー」では、動きを確認することはできません。
「公開」すると、動きが確認できるようになります。
簡単には解らないようなURLを使うことをオススメします。

これで簡単には解析できない解答フォームができます。
あとは、JavaScriptとか正規表現などを勉強すると、さらにいろいろなことができるでしょう。