以下が要望に基づいた実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #inputForm {
            margin-bottom: 10px;
        }
        
        #flipForm {
            margin-bottom: 10px;
        }
        
        #outputSpace {
            font-size: 24px;
            text-align: center;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <form id="inputForm">
        <label for="inputText">文章入力:</label>
        <input type="text" id="inputText">
        <br>
    </form>
    <form id="flipForm">
        <label for="flipText">めくり指定:</label>
        <input type="text" id="flipText">
        <br>
    </form>
    <button id="submitButton" onclick="flipText()">決定</button>
    <div id="outputSpace"></div>

    <script>
        function flipText() {
            var inputText = document.getElementById("inputText").value;
            var flipText = document.getElementById("flipText").value.split(",");
            
            var outputText = inputText;
            for (var i = 0; i < flipText.length; i++) {
                outputText = outputText.replace(flipText[i], "■".repeat(flipText[i].length));
            }
            
            document.getElementById("outputSpace").textContent = outputText;
            
            var hiddenElements = document.getElementsByClassName("hidden");
            for (var j = 0; j < hiddenElements.length; j++) {
                hiddenElements[j].addEventListener("click", revealFlippedText);
            }
        }
        
        function revealFlippedText(event) {
            event.target.textContent = event.target.dataset.text;
            event.target.classList.add("hidden");
        }
    </script>
</body>
</html>
```

この実装では、ユーザーが文章入力フォームに文章を入力し、めくり指定フォームにめくりたい部分の文字列を入力します。指定した文字列はカンマで区切って複数入力することができます。決定ボタンを押すと、指定した文字列を「■」に置き換えた文章が表示スペースに表示されます。この「■」をタップすると、元の文章が表示されます。

これにより、「こんにちは」という文章に対して「にちは」をめくり指定した場合、「こん■■■」と表示され、「■」をタップすると「こんにちは」となります。

ジョークが無いため、その部分は実装には含まれていませんが、必要であれば適宜追加してください。