scrolling instructions; previous/next functionality; lesson progress tracking

Author: gregsdennis

LearnJsonEverything/Program.cs

@@ -15,4 +15,6 @@
 var host = builder.Build();
 _ = host.Services.GetService<HttpClient>();
 
+_ = await CompilationHelpers.LoadAssemblyReferences(host.Services.GetService<HttpClient>()!);
+
 await host.RunAsync();

LearnJsonEverything/Services/CompilationHelpers.cs

@@ -27,6 +27,7 @@ public static async Task<MetadataReference[]> LoadAssemblyReferences(HttpClient
 				.Where(x => !x.IsDynamic)
 				.Select(x => x.FullName!.Split(',')[0])
 				.Concat(EnsuredAssemblies)
+				.Distinct()
 				.OrderBy(x => x)
 				.ToArray();
 

LearnJsonEverything/Services/LessonData.cs

@@ -12,4 +12,5 @@ public class LessonData
 	public string Instructions { get; set; }
 	public string ContextCode { get; set; }
 	public JsonArray Tests { get; set; }
+	public bool Achieved { get; set; }
 }

LearnJsonEverything/Services/LessonPlan.cs

@@ -1,20 +1,28 @@
-using System.Text.Json;
+using System.Collections;
+using System.Text.Json;
 using System.Text.Json.Serialization;
 
 namespace LearnJsonEverything.Services;
 
 [JsonConverter(typeof(LessonPlanJsonConverter))]
-public class LessonPlan
+public class LessonPlan : IReadOnlyList<LessonData>
 {
 	private readonly LessonData[] _lessonData;
 	private readonly Dictionary<Guid, int> _indexLookup;
 
 	public LessonData this[int i] => _lessonData[i];
+	public LessonData this[Guid id] => _lessonData[_indexLookup[id]];
+
+	public int Count => _lessonData.Length;
 
 	public LessonPlan(LessonData[] lessonData)
 	{
 		_lessonData = lessonData;
-		_indexLookup = lessonData.Select((d, i) => (d.Id, i)).ToDictionary(x => x.Id, x => x.i);
+		_indexLookup = lessonData.Select((d, i) =>
+		{
+			d.Index = i;
+			return (d.Id, i);
+		}).ToDictionary(x => x.Id, x => x.i);
 	}
 
 	public LessonData? GetPrevious(Guid? id)
@@ -38,6 +46,10 @@ public LessonPlan(LessonData[] lessonData)
 
 		return _lessonData[index];
 	}
+
+	public IEnumerator<LessonData> GetEnumerator() => ((IEnumerable<LessonData>)_lessonData).GetEnumerator();
+
+	IEnumerator IEnumerable.GetEnumerator() => GetEnumerator();
 }
 
 public class LessonPlanJsonConverter : JsonConverter<LessonPlan>

LearnJsonEverything/Services/Runners/SchemaRunner.cs

@@ -64,13 +64,15 @@ public static string[] Run(string userCode, LessonData lesson)
 		var tests = lesson.Tests.Deserialize(SerializerContext.Default.SchemaTestArray)!;
 		var results = new List<string>();
 
+		var correct = true;
 		foreach (var test in tests)
 		{
 			var result = runner.Run(new JsonObject { ["instance"] = test.Instance });
-			results.Add($"{(test.IsValid == result?.IsValid ? Iconography.SuccessIcon : Iconography.ErrorIcon)} {test.Instance.AsJsonString()}");
+			correct &= test.IsValid == result.IsValid;
+			results.Add($"{(test.IsValid == result.IsValid ? Iconography.SuccessIcon : Iconography.ErrorIcon)} {test.Instance.AsJsonString()}");
 		}
 
-		// run the code
+		lesson.Achieved |= correct;
 
 		return [.. results];
 	}

LearnJsonEverything/Shared/Teacher.razor

@@ -12,17 +12,29 @@
 @using EditorOptions = LearnJsonEverything.Services.EditorOptions
 
 @inject DataManager DataManager;
-@inject NavigationManager NavigationManager;
 @inject IJSRuntime JsRuntime;
 @inject HttpClient Client;
 
 <div id="layout" class="row fill-remaining row-margin-reset">
-	<div class="col-4 d-flex">
-		<div class="grid-panel flex-grow-1">
+	<div class="col-2 d-flex h-100">
+		<div class="grid-panel flex-grow-1 scroll">
+			<ul role="listbox">
+				@foreach (var lesson in _lessons)
+				{
+					<li id="@lesson.Id" role="option" @onclick="() => SelectLesson(lesson.Id)">
+						<span class="@(lesson.Achieved ? "" : "invisible")">@Iconography.SuccessIcon</span>
+						@lesson.Title
+					</li>
+				}
+			</ul>
+		</div>
+	</div>
+	<div class="col-4 d-flex h-100">
+		<div class="grid-panel flex-grow-1 scroll">
 			<MarkdownSpan Content="@Instructions"></MarkdownSpan>
 		</div>
 	</div>
-	<div class="col-8 d-flex">
+	<div class="col-6 d-flex">
 		<div id="right-panel" class="row row-margin-reset flex-grow-1">
 			<div id="workspace" class="col-12 d-flex flex-grow-1">
 				<div class="grid-panel flex-grow-1">
@@ -32,9 +44,9 @@
 			</div>
 			<div id="controls" class="col-12">
 				<div class="d-flex">
+					<button class="btn btn-primary m-1" @onclick="PreviousLesson">&lt; Previous</button>
 					<button class="btn btn-primary m-1" @onclick="Run">Run</button>
-					<button class="btn btn-primary m-1">content</button>
-					<button class="btn btn-primary m-1">content</button>
+					<button class="btn btn-primary m-1" disabled="@_nextButtonDisabled" @onclick="NextLesson">Next &gt;</button>
 				</div>
 			</div>
 			<div id="output" class="col-12 d-flex">
@@ -48,11 +60,12 @@
 </div>
 
 @code {
-#pragma warning disable CS8618
+	#pragma warning disable CS8618
 	private StandaloneCodeEditor _codeEditor;
 	private StandaloneCodeEditor _outputEditor;
-	private LessonPlan _lessons;
+	private LessonPlan _lessons = new([]);
 	private LessonData? _currentLesson;
+	private bool _nextButtonDisabled = true;
 
 	[Parameter]
 	public string LessonSource { get; set; }
@@ -69,9 +82,12 @@
 		{
 			var userCode = await _codeEditor.GetValue();
 
-			await _outputEditor.SetValue("");
+			await _outputEditor.SetValue(string.Empty);
+
 			var results = SchemaRunner.Run(userCode, _currentLesson!);
+
 			await _outputEditor.SetValue(string.Join(Environment.NewLine, results!));
+			_nextButtonDisabled = !CanMoveToNextLesson();
 		}
 		catch (Exception e)
 		{
@@ -80,35 +96,43 @@
 		}
 	}
 
-	private void PreviousLesson()
+	private Task PreviousLesson()
 	{
 		_currentLesson = _lessons.GetPrevious(_currentLesson?.Id);
-		LoadLesson();
+		return LoadLesson();
 	}
 
-	private void NextLesson()
+	private Task NextLesson()
 	{
 		_currentLesson = _lessons.GetNext(_currentLesson?.Id);
-		LoadLesson();
+		return LoadLesson();
 	}
 
-	private void Reset()
+	private Task Reset()
 	{
-		LoadLesson();
+		return LoadLesson();
 	}
 
-	private void LoadLesson()
+	private Task LoadLesson()
 	{
 		_currentLesson ??= _lessons[0];
 		Instructions = SchemaRunner.BuildInstructions(_currentLesson);
+		_nextButtonDisabled = !CanMoveToNextLesson();
+		return _outputEditor.SetValue(string.Empty);
+	}
+
+	private bool CanMoveToNextLesson()
+	{
+		if (_currentLesson is null) return false;
+		if (_currentLesson.Index == _lessons.Count - 1) return false;
+		return _currentLesson.Achieved;
 	}
 
 	protected override async Task OnInitializedAsync()
 	{
-		_ = await CompilationHelpers.LoadAssemblyReferences(Client);
 		await DownloadLessonPlan();
 
-		LoadLesson();
+		await LoadLesson();
 
 		await base.OnInitializedAsync();
 	}
@@ -121,4 +145,14 @@
 		Console.WriteLine(json.AsJsonString());
 		_lessons = json.Deserialize(SerializerContext.Default.LessonPlan)!;
 	}
+
+	private async Task SelectLesson(Guid lessonId)
+	{
+		var index = _currentLesson?.Index ?? 0;
+		if (index == 0 || _lessons[index - 1].Achieved)
+		{
+			_currentLesson = _lessons[lessonId];
+			await LoadLesson();
+		}
+	}
 }

LearnJsonEverything/Shared/Teacher.razor.css

@@ -11,6 +11,7 @@
 }
 
 .grid-panel {
+  flex: 1 1 auto;
   border: solid 1px #CCBCD9;
   border-radius: 5px;
   padding: 10px !important;
@@ -21,3 +22,29 @@
   margin-left: auto;
   margin-right: auto;
 }
+
+[role="option"] {
+  position: relative;
+  display: block;
+  align-content: center;
+  text-align: left;
+  margin: 2px;
+  line-height: 1.8em;
+  cursor: pointer;
+}
+
+[role="listbox"]:focus [role="option"].focused,
+[role="option"]:hover {
+  color: white;
+}
+
+.btn-list-option {
+  border: none;
+  background: none;
+  height: 100%;
+  width: 100%;
+}
+
+ol, ul {
+  padding-left: .5rem;
+}

LearnJsonEverything/wwwroot/css/app.css

@@ -42,7 +42,7 @@ article {
 }
 
 .scroll {
-	overflow-y: auto;
+  overflow: auto;
 }
 
 h1:focus {

LearnJsonEverything/wwwroot/css/editor.css

@@ -1,7 +1,3 @@
-.editor-input {
-    height: 600px;
-}
-
 .editor-lang-json {
   float: right;
   padding: 0px 14px;

LearnJsonEverything/wwwroot/data/lessons/schema.yaml

@@ -1,8 +1,8 @@
 ---
 - id: 26b6ebca-58e6-4814-86ea-4946d844c9a6
-  title: Validate a string
-  instructions: Create a `JsonSchema` object and validate the string instance.  Return
-    the evaluation results.
+  title: Any string
+  instructions: |-
+    Configure the provided `JsonSchemaBuilder` to produce a schema that validates a string instance.
   inputTemplate: ''
   contextCode: |-
     using System;
@@ -19,8 +19,12 @@
         public EvaluationResults Run(JsonObject context)
         {
             var instance = context["instance"];
+            var builder = new JsonSchemaBuilder();
 
             /* USER CODE */
+
+            var schema = builder.Build();
+            return schema.Evaluate(instance);
         }
     }
   tests:
@@ -32,3 +36,51 @@
     isValid: false
   - instance: false
     isValid: false
+- id: 26b6ebca-58e6-4814-86ea-4946d844c9a7
+  title: Number with limits
+  instructions: |-
+    Configure the provided `JsonSchemaBuilder` to produce a schema that validates a number instance
+    that is less than or equal to 10 but greater than 0.
+  inputTemplate: ''
+  contextCode: |-
+    using System;
+    using System.Collections.Generic;
+    using System.Text.Json;
+    using System.Text.Json.Nodes;
+    using System.Text.Json.Serialization;
+    using Json.Schema;
+    
+    namespace LearnJsonEverything;
+    
+    public class Lesson : ILessonRunner<EvaluationResults>
+    {
+        public EvaluationResults Run(JsonObject context)
+        {
+            var instance = context["instance"];
+            var builder = new JsonSchemaBuilder();
+
+            /* USER CODE */
+
+            var schema = builder.Build();
+            return schema.Evaluate(instance);
+        }
+    }
+  tests:
+  - instance: 6.8
+    isValid: true
+  - instance: 10
+    isValid: true
+  - instance: 42e-6
+    isValid: true
+  - instance: -5.1
+    isValid: false
+  - instance: 0
+    isValid: false
+  - instance: a string value
+    isValid: false
+  - instance: []
+    isValid: false
+  - instance: {}
+    isValid: false
+  - instance: false
+    isValid: false