Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
DrCray authored Feb 29, 2024
1 parent 9015a7c commit 9f3b2b5
Show file tree
Hide file tree
Showing 8 changed files with 1,840 additions and 0 deletions.
230 changes: 230 additions & 0 deletions ssPre/AlexLosesPokeyDicta.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,230 @@
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8" content="Dr Ray EFL ESL, English learning">

<!-- content attribute is for search engines -->
<meta name="quizMaker" content="English Learning Management Method">

<!-- Mobile responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- xxxx NO Cache xxx -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">


<title>AlexLosesPokeyDicta</title>

<!-- link rel="stylesheet" href="style.css" -->

<!-- <script src="script.js"></script -->



<style>
body{
font-family: sans-serif;
background-color: #d4e6f1 ;
margin: 0 3em 0 3em;
padding: 1ex 2ex 1ex 2ex;
max-width:55rem; margin:auto;
}

:focus {outline:none;}
::-moz-focus-inner {border:0; }


.fake-button {
background-color: #E9E9ED;
border-style:solid; border-width:thin; border-radius: 5px;
box-shadow: 1px 1px; padding: 0 1ex 0 1ex; font-size: 0.85em;

}

.fake-button:hover {
background-color: lightblue;
border-radius: 5px; box-shadow: 3px 3px gray;

}

/* for <button> class="hltBtn" */
.hlBtn {border-radius:5px;}

.hlBtn:hover {
background-color:lightblue; border-radius: 5px;
}

h1 {
color: maroon;
margin-left: 40px;
}
li {
margin:0 0 1ex 0;
}
</style>

</head>

<body>


<p id="zztitle"><b contenteditable="false">Alex loses Pokey</b></p>
<script>
//put this under the header section
let initialContent = document.getElementById('zztitle').textContent;
</script>

<div id="dict" style="background-color:#fff; padding:1ex;" contenteditable="false"><ol><li>Alex discovered his front door open and realized his dog Pokey had wandered off.</li><li>Concerned, he quickly grabbed Pokey's leash and went out to find him.</li><li>He first searched the park, asking if anyone had seen Pokey and showing them a photo of him.</li><li>Having no luck, Alex decided to put up posters around the neighborhood.</li><li> As it got darker, when he was losing hope, he heard a bark in the distance.</li><li>Following the sound, he found Pokey on sitting on a porch, accompanied by a kind old man.</li><li>The old man said he had expected that the owner would show up sooner or later.</li></ol></div>

<button id="text2list" style="margin: 0px 0px 1em; display: none;" onclick="textToList()">make List</button>


<script>

function textToList(){
//------- dict text to List----------------
const div = document.getElementById('dict');

const text = div.textContent;
const listItems = text.split("^^");

const ol = document.createElement('ol');

for (const li of listItems) {
const liElement = document.createElement("li");
liElement.textContent = li;
div.appendChild(ol);
ol.appendChild(liElement);
}
div.innerHTML = ol.outerHTML;
// ------ end comppQs make List ----------------------
} //endt textToList()
</script>

<!-- =============== SAVE THE DOM as FILE ==================== -->
<div id="saveDom" style="background-color: cadetblue; width: fit-content; margin: 5px 0px 0px 1em; padding: 1ex; display: none;">

<label style="background-color: antiquewhite;"> name the file before saving &nbsp;
<input id="fileName" type="text" size="30" value="fileName">
</label><br>

<button id="saveDownload" class="hlBtn" onclick="saveDom()">Save/Download</button>
</div>



<script>
function toggleEditOff(){

document.getElementById("saveDom").style.display="none";
document.getElementById("text2list").style.display="none";

let contEdbls = document.querySelectorAll('[contentEditable="true"]');
for (const contEdbl of contEdbls) {
contEdbl.contentEditable=false;
}

// end remove all editables ************************
} //end toggleEditOFf

function toggleEditOn(){

document.getElementById("saveDom").style.display="block";
document.getElementById("text2list").style.display="block";

let contEdbls = document.querySelectorAll('[contentEditable="false"]');
for (const contEdbl of contEdbls) {
contEdbl.contentEditable=true;
}

//end restore editabels **********************
}

</script>


<script>
function saveDom(){

//add this to beginning of save file section
const currentContent = document.getElementById('zztitle').textContent;

if (initialContent === currentContent) {
let userResponse = window.confirm('Update Page Title?');

if (userResponse) {
// User clicked "Yes"
return; // Exit the function immediately
}
}

oldTitle = document.title;
let fileName = document.getElementById("fileName").value;
document.title = fileName;


/*
//save theDom editMode *************************
let theDom = document.documentElement.innerHTML;
//console.log(theDom);
const docHtml = '<!DOCTYPE html><html lang="en">';
const endHtml = '</html>';
const fullHtmlDoc = docHtml + theDom + endHtml;
// here we use Blob to set up a download link
// (A) CREATE BLOB OBJECT
const myBlob = new Blob([fullHtmlDoc], {type: "text/html"});
// (B) CREATE DOWNLOAD LINK
const url = window.URL.createObjectURL(myBlob);
const anchor = document.createElement("a");
anchor.href = url;
anchor.download = fileName + "EditMode.html";
anchor.click();
window.URL.revokeObjectURL(url);
//end save theDom editMode
*/
toggleEditOff();

// theDOM study mode
let theDom2 = document.documentElement.innerHTML;
const docHtml2 = '<!DOCTYPE html><html lang="en">';
const endHtml2 = '</html>';
const fullHtmlDoc2 = docHtml2 + theDom2 + endHtml2;

// EditMode save .. here we use Blob to set up a download link

// (A) CREATE BLOB OBJECT
const myBlob2 = new Blob([fullHtmlDoc2], {type: "text/html"});

// (B) CREATE DOWNLOAD LINK
const url2 = window.URL.createObjectURL(myBlob2);
const anchor2 = document.createElement("a");
anchor2.href = url2;
anchor2.download = fileName + ".html";

anchor2.click();
window.URL.revokeObjectURL(url2);
//end the BLOB stuff and save

alert("Check the browser's \n default download folder");

toggleEditOn();
document.title = oldTitle;

}
</script>


<footer style="margin:35px">
<p> ... end. </p>
</footer>





</body></html>
Loading

0 comments on commit 9f3b2b5

Please sign in to comment.