Skip to content

Commit

Permalink
Merge pull request #21 from JMU-CS/dev
Browse files Browse the repository at this point in the history
First deployment of Summer 2024
  • Loading branch information
ellonamac authored Jul 8, 2024
2 parents bc01667 + 8a3b840 commit 76c1e7b
Show file tree
Hide file tree
Showing 36 changed files with 4,698 additions and 1,413 deletions.
9 changes: 5 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
# Praxly

Praxly is an web-based IDE that empowers users to read, write, and run the pseudocode used in the [CS Praxis Test][1].
Praxly is a web-based IDE that empowers users to read, write, and run the [pseudocode][1] used in the [CS Praxis Test][2].
Praxly supports bidirectional synchronization between both block-based and text-based editors, allowing users to learn and visualize the code while also offering the efficiency of editing text.
The text editor uses [Ace][2], and the block editor uses [Blockly][3].
The text editor uses [Ace][3], and the block editor uses [Blockly][4].

[1]: https://www.ets.org/pdfs/praxis/5652.pdf#page=21
[2]: https://ace.c9.io/
[3]: https://developers.google.com/blockly
[2]: https://praxis.ets.org/test/5652.html
[3]: https://ace.c9.io/
[4]: https://developers.google.com/blockly

<figure>
<img src="public/images/praxly-screenshot-narrow.png">
Expand Down
Binary file added archive/138226749.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions archive/myModal.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!-- Welcome/About screen -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>

<h2>Welcome To Praxly!</h2>
<ul id="helpMenu">
<button class="helpMenuButtons" id="FeaturesButton">features (outdated)</button>
<button class="helpMenuButtons" id="ChangelogButton">Changelog</button>
<button class="helpMenuButtons" id="BugButton">Report a bug</button>
<button class="helpMenuButtons" id="GitHubButton">github</button>
<button class="helpMenuButtons" id="PeopleButton">People</button>
</ul>

<p>This is a place to try the pseudocode that will be used in the praxis exam.
Feel free to switch between the blocks and the text whenever you please!</p>
<p>📕 The <b>Book</b> Icon is the manual, which is the reference to the pseudocode that this was made for.</p>
<p>🔗The Blue links are example programs.
Feel free to submit your own example to me through the bug report form.</p>

<h4>Notes</h4>
<ol>
<li>✅ This is in very early release, but as of now everything on the blocks list will work properly.</li>
<li>🚨 error messages are probably going to be inconsistent.
I'm sure there will be many scenarios I didn't think of that will cause errors.</li>
<li>😔 There is currently no support for object-oriented programming.</li>
</ol>
</div>
</div>
53 changes: 53 additions & 0 deletions archive/myModal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
let modal;
let featuresButton;
let changelogButton;
let bugButton;
let githubButton;
let peopleButton;

modal = document.getElementById("myModal");
featuresButton = document.getElementById('FeaturesButton');
changelogButton = document.getElementById('ChangelogButton');
bugButton = document.getElementById("BugButton");
githubButton = document.getElementById('GitHubButton');
peopleButton = document.getElementById('PeopleButton');

// When the user clicks the button, open the modal
infoButton.onclick = function () {
setLight();
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
manual.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal || event.target == manual) {
modal.style.display = "none";
manual.style.display = "none";
}
}

featuresButton.addEventListener('click', function () {
window.open("features.html", '_blank');
});

changelogButton.addEventListener('click', function () {
window.open("changelog.html", '_blank');
});

bugButton.addEventListener('click', function () {
window.open("BugsList.html", '_blank');
});

githubButton.addEventListener('click', function () {
window.open("https://github.com/JMU-CS/praxly", '_blank');
});

peopleButton.addEventListener('click', function () {
window.open('people.html');
});
78 changes: 63 additions & 15 deletions public/style.css → archive/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ html, body {
body {
display: flex;
flex-direction: column;
padding: 2px;
}

/* header and toolbar */
Expand All @@ -24,7 +23,12 @@ h1 {
justify-content: space-between;
align-items: center;
padding: 5px;
background-color: goldenrod
background-color: #ccc;
}


body.embed > .nav-bar {
display: none;
}

.nav-bar img {
Expand Down Expand Up @@ -87,12 +91,12 @@ h1 {
background-color: green;
}

#DebugButton {
#debugButton {
background-color: rgb(79, 5, 163);
background-image: url('./images/bug44.png');
}

#DebugButton:hover {
debugButton:hover {
background-image: none;
background-color: #8f45f6;
}
Expand Down Expand Up @@ -351,8 +355,7 @@ h1 {
#secondary_bar {
display: flex;
background-color: #e7e5e5;
border-style: solid;
border-color: #aaaaaa;
border: 1px solid #aaa;
}

/* Style the tab */
Expand Down Expand Up @@ -396,42 +399,50 @@ h1 {

main {
display: flex;
height: 60vh;
background-color: #ddc8f5;
flex-basis: 60%;
flex-grow: 1;
background-color: #74ceff;
}

#blocklyDiv {
flex: 1;
flex-grow: 1;
}

.resizeBar {
.resizeBarX {
width: 5px;
cursor: col-resize;
background-color: #7e0eff;
background-color: #2B5E7D;
}

.resizeBarY {
height: 5px;
cursor: row-resize;
background-color: #2B5E7D;
}

.codeEditor {
flex: 1;
width: 100%;
}


.bottom-part {
#bottom-part {
display: flex; /* Add this */
flex-direction: row; /* Add this */
height: 25%;
flex-basis: 25%;
}

.output {
flex: 1;
box-sizing: border-box;
position: relative;
margin: 10px;
/* margin: 10px; */
padding: 10px;
font-size: large;
border-radius: 10px;
/* border-radius: 10px; */
overflow: auto;
height: 100%;
/* flex-basis: 0%; */
}


Expand Down Expand Up @@ -552,6 +563,7 @@ main {
#Variable-table-outer td {
padding: 10px;
border: 1px solid #000000; /* Pretty borders for entries */
color: black;
}


Expand All @@ -560,3 +572,39 @@ main {
#Variable-table-outer tbody tr:hover {
background-color: #e2e2e2;
}

#embed-toolbar {
display: flex;
flex-direction: row;
gap: 2px;
position: fixed;
top: 10px;
right: 10px;
z-index: 999;
}

body:not(.embed) > #embed-toolbar {
display: none;
}

.embed-button {
border-radius: 50%;
width: 4em;
height: 4em;
line-height: 0;
}

.material-icon {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 0;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
21 changes: 21 additions & 0 deletions public/toolbox-dark.css → archive/toolbox-dark.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,27 @@ body {
background-color: black;
}

.nav-bar {
background-color: #3a3939;
}

.tab {
background-color: #3a3939;
/* border-color: #2B5E7D; */
}

#tab1_button, #tab2_button, #tab3_button {
color: white;
}

a {
color: white;
}

/* #secondary_bar {
border-color: #2B5E7D;
} */

/* Makes our label white. */
.blocklyTreeLabel {
color: rgb(255, 255, 255);
Expand Down
3 changes: 2 additions & 1 deletion public/toolbox-light.css → archive/toolbox-light.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
body {
color: black;
background-color: #a680ff;
background-color: #36759C; /*rgb(207, 207, 243) light purple, rgb(193, 118, 64) auburnish*/
overflow: hidden;
}

/* Makes our label white. */
Expand Down
94 changes: 94 additions & 0 deletions embed.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Praxly</title>
<link id="Theme" rel="stylesheet" href="./themes.css">
<link rel="icon" href="/fallen-leaf_1f342.ico" type="image/x-icon">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>

<body class="embed">
<div id="blocker"></div>

<main>
<div id="aceCode" class="codeEditor"></div>
<div id="blocklyDiv"></div>
</main>

<div class="resizeBarX"></div>
<div class="resizeBarY"></div>

<div class="side-view">

<!-- Toolbar -->
<div id="embed-toolbar">
<button id="runButton" class="embed-button">
Run
<span class="material-symbols-rounded run">play_arrow</span>
</button>
<button id="debugButton" class="embed-button">
Debug
<span class="material-symbols-rounded bug">pest_control</span>
</button>
<button id="stepButton" class="embed-button debugOptions">
Step
<span class="material-symbols-rounded step">step</span>
</button>
<button id="stopButton" class="embed-button debugOptions">
Exit
<span class="material-symbols-rounded stop">stop</span>
</button>
<button id="resetButton" class="embed-button">
Reset
<span class="material-symbols-rounded reset">restart_alt</span>
</button>
<button id="newWindow" class="embed-button">
Open
<span class="material-symbols-rounded open">open_in_new</span>
</button>
</div>

<!-- Output -->
<div class="output">
<div class="clearOut">🗑</div>
<p class="stdout"></p>
<p class="stderr"></p>
</div>

<div class="resize-side-view"></div>

<!--Variables -->
<div id="Variable-table-container">
<table id="Variable-table-outer">
<thead>
<tr>
<th>Variable</th>
<th>Type</th>
<th>Value</th>
<th>Scope</th>
</tr>
</thead>
<tbody id="Variable-table"></tbody>
</table>
</div>

</div>

<div class="debugModal">
<div class="debugModal-content">
<h2>Are you sure you want to reset?</h2>
<p>Resetting will remove any changes you made AND clear both the output and variables table.</p>
<div class="answerOptions">
<button id="yes">Yes</button>
<button id="no">No</button>
</div>
</div>
</div>

<script src="./src/main.js" type="module"></script>
</body>

</html>
Loading

0 comments on commit 76c1e7b

Please sign in to comment.