Skip to content

Commit

Permalink
skip link
Browse files Browse the repository at this point in the history
  • Loading branch information
@munusshih
munusshih committed Mar 14, 2024
1 parent a8c995a commit 57c1ea4
Show file tree
Hide file tree
Showing 2 changed files with 170 additions and 144 deletions.
22 changes: 22 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,28 @@ code.html::before {
content: '<'
}

/* accessibility */
.skip-link {
position: absolute;
top: 0;
background: var(--background);
border: 1px solid var(--foreground);
padding: 1rem;
top: 1rem;
left: 1rem;
z-index: 9999;
transform: translateY(-500%);
}

.skip-link:focus-visible {
outline-offset: 0;
}

.skip-link:focus-within {
transform: translateY(0%);
}


/* #sessions h4::before {
content: "< "
}
Expand Down
292 changes: 148 additions & 144 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,10 @@
<h1 class="effect">Core 2:<br>Intx Lab</h1>
</section>

<a class="skip-link" href='#sessions' target="_self">
Skip to content
</a>

<section class="grid border--bottom">
<div class="col-span-1 padding-1">
<ul>
Expand Down Expand Up @@ -363,173 +367,173 @@ <h3 class="effect">On Open Source</h3>
<h3 class="effect">On Crediting Code</h3>
</summary>

<ul>
<li>
<h4>Crediting ChatGPT for Assistance</h4>
<p class="space--after-single">When ChatGPT
helps
you with JavaScript code or explanations,
follow
these steps to give proper credit:</p>

<ol>
<li class="space--after-single">
Acknowledgment:
Begin your code or documentation by
acknowledging that you received
assistance
from ChatGPT in crafting your solution
or
understanding the problem.</li>
<li class="space--after-single">Describe
ChatGPT's Role: Explain how ChatGPT
contributed to your solution. Did it
provide
code snippets, algorithm insights, or
debugging tips?</li>
<li class="space--after-single">Original
Code:
If ChatGPT provided code, make sure to
rephrase and adapt it to fit your
assignment's requirements. Avoid
directly
copying and pasting code.</li>
</ol>


<pre class="space--after-double"><code><span class="text--color-grey">// Acknowledgment: ChatGPT provided insights and helped debug this code.</span>
<ul>
<li>
<h4>Crediting ChatGPT for Assistance</h4>
<p class="space--after-single">When ChatGPT
helps
you with JavaScript code or explanations,
follow
these steps to give proper credit:</p>

<ol>
<li class="space--after-single">
Acknowledgment:
Begin your code or documentation by
acknowledging that you received
assistance
from ChatGPT in crafting your solution
or
understanding the problem.</li>
<li class="space--after-single">Describe
ChatGPT's Role: Explain how ChatGPT
contributed to your solution. Did it
provide
code snippets, algorithm insights, or
debugging tips?</li>
<li class="space--after-single">Original
Code:
If ChatGPT provided code, make sure to
rephrase and adapt it to fit your
assignment's requirements. Avoid
directly
copying and pasting code.</li>
</ol>


<pre class="space--after-double"><code><span class="text--color-grey">// Acknowledgment: ChatGPT provided insights and helped debug this code.</span>
<span class="text--color-grey">// The following function calculates the factorial of a number.</span>

<span class="text--color-green">function</span> <span class="text--color-aqua">calculateFactorial(n)</span> <span class="text--color-green">{</span>
<span class="text--color-grey">// Your implementation here.</span>
<span class="text--color-green">}</span></code></pre>
</li>


<li>
<h4>Using JavaScript Tutorials</h4>
<p class="space--after-single">Incorporating
JavaScript tutorials into your assignments?
Follow these guidelines:</p>
<ol>
<li class="space--after-single">Cite the
Tutorial: Mention the tutorial's title,
author, publication date, and provide a
link
if available.</li>
<li class="space--after-single">Specify
Sections: If you used specific sections
or
code examples from the tutorial, clearly
indicate which parts were referenced.
</li>
<li class="space--after-single">Add Your Own
Code: Always add your unique code, and
ensure your assignment reflects your
understanding of the material.</li>
</ol>
<pre class="space--after-double"><code><span class="text--color-grey">// I followed the tutorial "Introduction to JavaScript Functions" by John Doe (Published on September 1, 2023, at www.example.com).</span>
</li>


<li>
<h4>Using JavaScript Tutorials</h4>
<p class="space--after-single">Incorporating
JavaScript tutorials into your assignments?
Follow these guidelines:</p>
<ol>
<li class="space--after-single">Cite the
Tutorial: Mention the tutorial's title,
author, publication date, and provide a
link
if available.</li>
<li class="space--after-single">Specify
Sections: If you used specific sections
or
code examples from the tutorial, clearly
indicate which parts were referenced.
</li>
<li class="space--after-single">Add Your Own
Code: Always add your unique code, and
ensure your assignment reflects your
understanding of the material.</li>
</ol>
<pre class="space--after-double"><code><span class="text--color-grey">// I followed the tutorial "Introduction to JavaScript Functions" by John Doe (Published on September 1, 2023, at www.example.com).</span>

<span class="text--color-grey">// In this assignment, I applied the concepts from the tutorial to create custom JavaScript functions:</span>

<span class="text--color-grey">// Your code here.</span></code></pre>
</li>


<li>
<h4>Utilizing Code Examples</h4>
<p class="space--after-single">When integrating
</li>


<li>
<h4>Utilizing Code Examples</h4>
<p class="space--after-single">When integrating
code
examples from the web or documentation,
adhere
to these principles:</p>
<ol>
<li class="space--after-single">Source
Attribution: State the source of the
code
examples from the web or documentation,
adhere
to these principles:</p>
<ol>
<li class="space--after-single">Source
Attribution: State the source of the
code
example by providing the URL, author,
and
publication date if available.</li>
<li class="space--after-single">Explanation:
Include an explanation of how the code
works
in your assignment and why you chose to
use
it.</li>
<li class="space--after-single">
Modifications:
If you modify the code example, specify
the
changes made and the reasons behind
them.
</li>
</ol>
<pre class="space--after-double"><code><span class="text--color-grey">// I found the following code snippet on www.examplecode.com, posted by John Smith on July 15, 2023.</span>
example by providing the URL, author,
and
publication date if available.</li>
<li class="space--after-single">Explanation:
Include an explanation of how the code
works
in your assignment and why you chose to
use
it.</li>
<li class="space--after-single">
Modifications:
If you modify the code example, specify
the
changes made and the reasons behind
them.
</li>
</ol>
<pre class="space--after-double"><code><span class="text--color-grey">// I found the following code snippet on www.examplecode.com, posted by John Smith on July 15, 2023.</span>

<span class="text--color-grey">// I used this code as a foundation for my project with the following modifications:</span>

<span class="text--color-grey">// Your modified code here.</span></code></pre>
</li>



<li>
<h4>Collaborating with Others</h4>
<p class="space--after-single">In collaborative
JavaScript assignments, ensure proper credit
to
collaborators:</p>
<ol>
<li class="space--after-single">
Acknowledgment:
Mention the names of your collaborators
and
their specific contributions to the
project.
</li>
<li class="space--after-single">
Collaboration
Details: Provide information about how
you
worked together, whether through pair
programming, code reviews, or other
methods.
</li>
</ol>
<pre
class="space--after-double"><code><span class="text--color-grey">// Collaboration Credit: I collaborated with Jane Doe on this JavaScript project.</span>
</li>



<li>
<h4>Collaborating with Others</h4>
<p class="space--after-single">In collaborative
JavaScript assignments, ensure proper credit
to
collaborators:</p>
<ol>
<li class="space--after-single">
Acknowledgment:
Mention the names of your collaborators
and
their specific contributions to the
project.
</li>
<li class="space--after-single">
Collaboration
Details: Provide information about how
you
worked together, whether through pair
programming, code reviews, or other
methods.
</li>
</ol>
<pre
class="space--after-double"><code><span class="text--color-grey">// Collaboration Credit: I collaborated with Jane Doe on this JavaScript project.</span>

<span class="text--color-grey">// Jane contributed to the user interface design and helped troubleshoot issues.</span>

<span class="text--color-grey">// Your code and explanations here.</span></code></pre>
</li>

<li class="space--after-quadruple">
<h4>Referring to Open Source Projects</h4>
<p class="space--after-single">When leveraging
open-source JavaScript libraries or code,
follow
these steps:</p>
<ol>
<li class="space--after-single">Project
Reference: Clearly state the name of the
open-source project or library you used.
</li>
<li class="space--after-single">License
Compliance: Ensure that you adhere to
the
project's license requirements,
including
proper attribution if necessary.</li>
</ol>
<pre><code><span class="text--color-grey">// I integrated the "Chart.js" library (licensed under MIT) for data visualization in this project.</span>
</li>

<li class="space--after-quadruple">
<h4>Referring to Open Source Projects</h4>
<p class="space--after-single">When leveraging
open-source JavaScript libraries or code,
follow
these steps:</p>
<ol>
<li class="space--after-single">Project
Reference: Clearly state the name of the
open-source project or library you used.
</li>
<li class="space--after-single">License
Compliance: Ensure that you adhere to
the
project's license requirements,
including
proper attribution if necessary.</li>
</ol>
<pre><code><span class="text--color-grey">// I integrated the "Chart.js" library (licensed under MIT) for data visualization in this project.</span>

<span class="text--color-grey">// The library can be found at www.chartjs.org.</span>

<span class="text--color-grey">// Your code utilizing the library here.</span></code></pre>
</li>
</li>

</ul>
</ul>
</details>
</article>
</section>
Expand Down

0 comments on commit 57c1ea4

Please sign in to comment.