CS61B_Graph_Traversal_Element

courseInstances/CS61BGraphs/assessments/New_1/clientFilesAssessment/question.html

@@ -0,0 +1,23 @@
+<!-- AUTO-GENERATED FILE -->
+<pl-question-panel>
+ Make a function <code>is_sublist</code> that checks whether the first
+    argument contains the second as a sublist (including ordering), eg
+
+    <pl-code language="python">
+    >> is_sublist(['a', 'b', 'c', 'd'], ['b', 'c'])
+    True
+    >> is_sublist([1, 2, 3, 4], [4, 3])
+    False</pl-code>
+
+</pl-question-panel>
+
+<!-- see README for where the various parts of question live -->
+<pl-faded-parsons>
+  def is_sublist(list, sublist): #0given
+  n, m = len(list), len(sublist) #1given
+  for i in range(!BLANK):
+  start, end = i, i + m
+  if list[!BLANK] == sublist: #blank _:_
+  return !BLANK
+  return False #1given
+</pl-faded-parsons>

courseInstances/CS61BGraphs/assessments/New_1/clientFilesAssessment/server.py

@@ -0,0 +1,18 @@
+# AUTO-GENERATED FILE
+# go to https://prairielearn.readthedocs.io/en/latest/python-grader/#serverpy for more info
+
+def generate(data):
+    # Define incoming variables here
+    names_for_user = [
+        # ex: student receives a matrix m
+        # {"name": "m", "description": "a 2x2 matrix", "type": "numpy array"}
+    ]
+    # Define outgoing variables here
+    names_from_user = [
+        {"name": "is_sublist", "description": "", "type": "python function"},
+    ]
+
+    data["params"]["names_for_user"] = names_for_user
+    data["params"]["names_from_user"] = names_from_user
+
+    return data

courseInstances/CS61BGraphs/assessments/New_1/infoAssessment.json

@@ -0,0 +1,48 @@
+{
+    "uuid": "e073375f-2988-4ac7-a2d7-2cec65ed4f02",
+    "type": "Homework",
+    "title": "Study",
+    "set": "Homework",
+    "number": "1",
+    "allowAccess": [],
+    "zones": [
+        {
+            "title": "Old Type",
+            "comment": "These are new questions created for this exam",
+            "questions": [
+                {
+                    "id": "DFS_New_1",
+                    "autoPoints": 1
+                },
+                {
+                    "id": "BFS_New_2",
+                    "autoPoints":1
+                },
+                                {
+                    "id": "DFS_New_2",
+                    "autoPoints": 1
+                },
+                {
+                    "id": "BFS_New_1",
+                    "autoPoints":1
+                },
+                {
+                    "id": "DFS_Old_1",
+                    "autoPoints": 1
+                },
+                {
+                    "id": "BFS_Old_2",
+                    "autoPoints":1
+                },
+                                {
+                    "id": "DFS_Old_2",
+                    "autoPoints": 1
+                },
+                {
+                    "id": "BFS_Old_1",
+                    "autoPoints":1
+                }
+            ]
+        }
+    ]
+}

courseInstances/CS61BGraphs/assessments/New_1_copy2/clientFilesAssessment/question.html

@@ -0,0 +1,23 @@
+<!-- AUTO-GENERATED FILE -->
+<pl-question-panel>
+ Make a function <code>is_sublist</code> that checks whether the first
+    argument contains the second as a sublist (including ordering), eg
+
+    <pl-code language="python">
+    >> is_sublist(['a', 'b', 'c', 'd'], ['b', 'c'])
+    True
+    >> is_sublist([1, 2, 3, 4], [4, 3])
+    False</pl-code>
+
+</pl-question-panel>
+
+<!-- see README for where the various parts of question live -->
+<pl-faded-parsons>
+  def is_sublist(list, sublist): #0given
+  n, m = len(list), len(sublist) #1given
+  for i in range(!BLANK):
+  start, end = i, i + m
+  if list[!BLANK] == sublist: #blank _:_
+  return !BLANK
+  return False #1given
+</pl-faded-parsons>

courseInstances/CS61BGraphs/assessments/New_1_copy2/clientFilesAssessment/server.py

@@ -0,0 +1,18 @@
+# AUTO-GENERATED FILE
+# go to https://prairielearn.readthedocs.io/en/latest/python-grader/#serverpy for more info
+
+def generate(data):
+    # Define incoming variables here
+    names_for_user = [
+        # ex: student receives a matrix m
+        # {"name": "m", "description": "a 2x2 matrix", "type": "numpy array"}
+    ]
+    # Define outgoing variables here
+    names_from_user = [
+        {"name": "is_sublist", "description": "", "type": "python function"},
+    ]
+
+    data["params"]["names_for_user"] = names_for_user
+    data["params"]["names_from_user"] = names_from_user
+
+    return data

courseInstances/CS61BGraphs/assessments/New_1_copy2/infoAssessment.json

@@ -0,0 +1,49 @@
+{
+    "uuid": "fe23fc87-4c5c-4533-b9df-90577f479283",
+    "type": "Homework",
+    "title": "Study (copy 2)",
+    "set": "Homework",
+    "number": "1",
+    "allowAccess": [],
+    "zones": [
+        {
+            "title": "Old Type",
+            "comment": "These are new questions created for this exam",
+            "questions": [
+
+                {
+                    "id": "DFS_Old_1",
+                    "autoPoints": 1
+                },
+                {
+                    "id": "BFS_Old_2",
+                    "autoPoints": 1
+                },
+                {
+                    "id": "DFS_Old_2",
+                    "autoPoints": 1
+                },
+                {
+                    "id": "BFS_Old_1",
+                    "autoPoints": 1
+                },
+                                {
+                    "id": "DFS_New_1",
+                    "autoPoints": 1
+                },
+                {
+                    "id": "BFS_New_2",
+                    "autoPoints": 1
+                },
+                {
+                    "id": "DFS_New_2",
+                    "autoPoints": 1
+                },
+                {
+                    "id": "BFS_New_1",
+                    "autoPoints": 1
+                }
+            ]
+        }
+    ]
+}

courseInstances/CS61BGraphs/infoCourseInstance.json

@@ -0,0 +1,18 @@
+{
+    "uuid": "A4C7C4DF-9FF6-493E-BA61-7EB054B97B64",
+    "longName": "CS61BGraphs",
+    "allowAccess": [
+        {
+            "institution": "LTI",
+            "startDate": "2023-10-23T00:00:01",
+            "endDate": "2024-06-01T23:59:59"
+        },
+        {
+            "institution": "Any",
+            "startDate": "2023-10-23T00:00:01",
+            "endDate": "2024-06-01T23:59:59",
+            "uids": [
+            ]
+        }
+    ]
+}

elements/pl-interactive-graph/README.md

@@ -0,0 +1,61 @@
+# pl-interactive-graph for PrairieLearn
+
+## Overview
+`pl-interactive-graph` is a custom interactive element for PrairieLearn, designed for creating and interacting with graph-based questions. It supports various functionalities like graph traversal, visualization, and interactive node selection.
+
+## Usage
+To use the `pl-interactive-graph` element in your PrairieLearn course:
+
+1. **Include the Element in Your Question**: Embed the custom element tag in your question HTML file.
+2. **Define the Graph**: Specify the graph structure within the tag using your desired graph generation method. Use DOT language to specify your graph, to learn how to use DOT language, navigate to https://graphviz.org/
+3. **Set Attributes**: Customize the behavior and appearance of the graph using XML attributes. The element supports a variety of attributes to cater to different question types and requirements:
+    - `preserve-ordering`: Boolean. If set to `True`, it requires the answer sequence to match exactly.
+    - `answers`: String. String of an array of node labels representing the correct answer. (Example: "[A,B,C]")
+    - `partial-credit`: Boolean. If set to `True`, it allows partial credit for partially correct sequences.
+    - `directed`: Boolean. Specify whether the graph is directed.
+    - `engine`: String. Defines the layout engine for graph rendering (default is `"dot"`).
+    - `params-name-matrix`, `params-name`: String. Parameter names for matrix or other input types.
+    - `weights`: Boolean. Determines if weights are displayed on the graph.
+    - `weights-digits`: Integer. Number of digits to round the weights to.
+    - `weights-presentation-type`: String. Format for presenting weights.
+    - `params-name-labels`: String. Parameter name for node labels.
+    - `params-type`: String. Type of graph representation, e.g., `"adjacency-matrix"` or `"networkx"`.
+    - `negative-weights`: Boolean. Indicates if negative weights are to be shown.
+    - `log-warnings`: Boolean. Toggles logging of warnings.
+Some of the attributes have been inherited from pl-graph, here is more information on those specific inherited attributes: https://prairielearn.readthedocs.io/en/latest/elements/#pl-graph-element
+
+4. **Modify server.py if Needed**: Determine how would you want to grade the question, to access the order given by the student as the nodes were clicked, you can do student_answer = data["submitted_answers"]["selectedNodes"]. Note: If you have used custom attributes, like preserve-ordering or answer, this part might be different
+
+
+## Description
+The students will be presented with a graph of your specified structure and each node will be clickable. Students can click the node and depending on the element attribute values, the order might matter (they can also unclick nodes). A list of clicked nodes in the corresponding order will be shown on the left bottom of the question panel, to avoid clashes with the graph (still might happen for very large left leaning graphs). When the students click "submit" the element will record the clicked nodes and provide them to the backend.
+
+## Suggested Use
+This element is not only limited to purely graph traversal questions. Some of the possible problems that could be modelled by this element are (but not limited to): Network Flow, Finite State Machines, Pathfinding Algorithms, etc.
+
+## Example
+Different examples have been included in the questions folder. Here's an example of how you might use `pl-interactive-graph` in a question about graph traversal:
+
+```html
+<p>
+  What is the Breadth-First Search traversal order of this algorithm? Click the nodes in the order they are selected and click submit.
+</p>
+<pl-question-panel>
+  <pl-interactive-graph 
+    preserve-ordering="True" 
+    partial-credit="True" 
+    answers='["A","B","C","D","E","F","G","H","I"]'>
+      graph G {
+        A -- B;
+        A -- C;
+        B -- D;
+        B -- E;
+        C -- F;
+        C -- G;
+        E -- H;
+        E -- I;
+      }
+  </pl-interactive-graph>
+</pl-question-panel>
+
+

elements/pl-interactive-graph/info.json

@@ -0,0 +1,6 @@
+{
+    "controller": "interactive-graphs.py",
+    "dependencies": {
+      "elementStyles": ["interactive-graphs-css.css"]
+    }
+  }

elements/pl-interactive-graph/interactive-graphs-css.css

@@ -0,0 +1,11 @@
+.pl-graph {
+    display: flex;
+    flex-direction: column;
+    overflow-x: auto;
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+
+  .pl-graph > svg {
+    margin: auto;
+  }