Renamed project to CCharLearn
This commit is contained in:
BOT Alex
parent
a6f55347b8
commit
591c3307a9
233 changed files with 16 additions and 17 deletions
340
CCharLearn/Pages/Learn.razor
Normal file
340
CCharLearn/Pages/Learn.razor
Normal file
|
|
@ -0,0 +1,340 @@
|
|||
@page "/Learn"
|
||||
@using System.Text;
|
||||
@using CCharLearn.ExtensionMethods;
|
||||
|
||||
@inject NavigationManager navigator
|
||||
@inject Blazored.LocalStorage.ILocalStorageService localStorage
|
||||
@inject HttpClient httpClient
|
||||
@inject ISnackbar Snackbar
|
||||
@inject SpeechSynthesis SpeechSynthesis
|
||||
|
||||
<style>
|
||||
.LargeCharecter{
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 125px;
|
||||
}
|
||||
|
||||
.PinyinButtons{
|
||||
width: 125px;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<MudContainer Class="justify-center d-flex ma-0" Style="height: 100%;">
|
||||
<MudStack Class="d-flex">
|
||||
<MudStack Row=true Class="pt-2 d-flex justify-center">
|
||||
@if (!Answers.Any(x => x == null))
|
||||
{
|
||||
@*Color="@(selectedCorrect ? Color.Success : Color.Error)"*@
|
||||
<MudButton Disabled="@(!(Answers.Any(x=>x.isSelected)))" OnClick="()=>RemoveCCharFromSelection()" Variant="Variant.Outlined">Avoid</MudButton>
|
||||
}
|
||||
</MudStack>
|
||||
<MudContainer>
|
||||
<MudPaper Class="pa-16 ma-2 rounded-xl mud-dark" Elevation="1">
|
||||
<MudContainer Style="width: 100px; height: 100px" Class="pa-8 ma-4 d-flex justify-center align-center">
|
||||
@if (!Answers.Any(x => x == null))
|
||||
{
|
||||
<p class="LargeCharecter">@GetDisplayChar()</p>
|
||||
}
|
||||
</MudContainer>
|
||||
</MudPaper>
|
||||
</MudContainer>
|
||||
<MudContainer Class="pa-8 pt-10 justify-center align-center d-flex"
|
||||
Style="max-width:300px">
|
||||
<MudGrid Spacing="10" Class="align-center justify-center d-flex">
|
||||
@if (!Answers.Any(x=>x == null))
|
||||
{
|
||||
@for (int i = 0; i < Answers.Length; i++)
|
||||
{
|
||||
int buttonIndex = i;
|
||||
<MudButton Class="PinyinButtons ma-3"
|
||||
Variant="Variant.Outlined"
|
||||
@onclick="() => SelectButton(buttonIndex)"
|
||||
Color="@(Answers[buttonIndex].isSelected ? Color.Primary : Color.Default)">
|
||||
<MudText>
|
||||
@Answers[buttonIndex].cchar.pinyin.ToTitleCase()
|
||||
</MudText>
|
||||
</MudButton>
|
||||
}
|
||||
}
|
||||
</MudGrid>
|
||||
</MudContainer>
|
||||
<MudSpacer/>
|
||||
<MudContainer Class="justify-center d-flex">
|
||||
<MudStack Row=true>
|
||||
<MudButton Color="Color.Default" Variant="Variant.Outlined" OnClick="ShowMeaning">Meaning</MudButton>
|
||||
<MudButton Color="Color.Default" Variant="Variant.Outlined" OnClick="SayCorrectChar">Speech</MudButton>
|
||||
</MudStack>
|
||||
</MudContainer>
|
||||
<MudContainer Class="pb-8 justify-center align-center d-flex">
|
||||
@if (!Answers.Any(x => x == null))
|
||||
{
|
||||
<MudButton Disabled="@(!(Answers.Any(x=>x.isSelected)))" OnClick="Submit" Class="px-8 py-3" Variant="Variant.Filled" Size="Size.Large" Color="Color.Success" Style="font-size: 20px;"> Submit</MudButton>
|
||||
}
|
||||
</MudContainer>
|
||||
</MudStack>
|
||||
</MudContainer>
|
||||
|
||||
@code {
|
||||
bool isSavedLocally = false;
|
||||
|
||||
bool selectedCorrect = false;
|
||||
|
||||
public Answer[] Answers = new Answer[4];
|
||||
public void SelectButton(int selectedIndex)
|
||||
{
|
||||
for (int i = 0; i < Answers.Length; i++)
|
||||
{
|
||||
Answers[i].isSelected = (i == selectedIndex);
|
||||
}
|
||||
|
||||
selectedCorrect = Answers[selectedIndex].isCorrect;
|
||||
}
|
||||
|
||||
private CChar[]? _charecters;
|
||||
public CChar[]? Charecters
|
||||
{
|
||||
get
|
||||
{
|
||||
if (_charecters == null) throw new Exception("Loaded dataset empty?");
|
||||
|
||||
return _charecters;
|
||||
}
|
||||
set { _charecters = value; }
|
||||
}
|
||||
|
||||
public List<CCharStats>? DontSkipTheseCChar;
|
||||
|
||||
private async Task<string> GetFileContentsAsync(string filePath)
|
||||
{
|
||||
var fileResponse = await httpClient.GetByteArrayAsync(filePath);
|
||||
return Encoding.UTF8.GetString(fileResponse);
|
||||
}
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
Program.UpdateUiEvent += OnUiUpdate;
|
||||
|
||||
isSavedLocally = await localStorage.ContainKeyAsync("Normalized_chunk_001.json");
|
||||
|
||||
int selectedChunk = await localStorage.GetItemAsync<int>("SelectedChunk");
|
||||
|
||||
if (!isSavedLocally)
|
||||
Charecters = await httpClient.GetFromJsonAsync<CChar[]>($"Data/Normalized_chunk_{selectedChunk.ToString("000")}.json");
|
||||
else
|
||||
{
|
||||
string json = await localStorage.GetItemAsync<string>($"Normalized_chunk_{selectedChunk.ToString("000")}.json");
|
||||
Charecters = JsonConvert.DeserializeObject<CChar[]>(json);
|
||||
}
|
||||
|
||||
DontSkipTheseCChar = Charecters.Select(x=>new CCharStats(x)).ToList();
|
||||
Program.CCharsLeft = DontSkipTheseCChar.Count;
|
||||
Program.InvokeUiUpdate();
|
||||
|
||||
GenerateQuestion();
|
||||
}
|
||||
|
||||
void OnUiUpdate() => StateHasChanged();
|
||||
|
||||
void GenerateQuestion()
|
||||
{
|
||||
if (DontSkipTheseCChar.Count < 5)
|
||||
{
|
||||
FinishAndKickBackToLearn();
|
||||
return;
|
||||
}
|
||||
|
||||
int correctIndex = Random.Shared.Next(0, Answers.Length);
|
||||
|
||||
for (int i = 0; i < Answers.Length; i++)
|
||||
{
|
||||
bool isCorrect = i == correctIndex;
|
||||
CChar randomCChar;
|
||||
|
||||
repickRandomCChar:
|
||||
randomCChar = DontSkipTheseCChar[Random.Shared.Next(0, DontSkipTheseCChar.Count)].cchar;
|
||||
if (Answers.Any(x =>x != null && x.cchar == randomCChar)) goto repickRandomCChar;
|
||||
|
||||
Answers[i] = new Answer(randomCChar, isCorrect);
|
||||
}
|
||||
|
||||
string correctPinyin = GetCorrectCChar().pinyin;
|
||||
|
||||
for (int i = 0; i < Answers.Length; i++)
|
||||
{
|
||||
if (Answers[i].isCorrect) continue;
|
||||
if (Answers[i].cchar.pinyin != correctPinyin) continue;
|
||||
|
||||
Answers[i].cchar.pinyin += "_";
|
||||
}
|
||||
}
|
||||
|
||||
void FinishAndKickBackToLearn()
|
||||
{
|
||||
Snackbar.Add("Congrats, you have compleated this chunk!", Severity.Success, config =>
|
||||
{
|
||||
config.RequireInteraction = true;
|
||||
config.CloseAfterNavigation = false;
|
||||
});
|
||||
Program.UpdateUiEvent -= OnUiUpdate;
|
||||
Program.CCharsLeft = 0;
|
||||
|
||||
navigator.NavigateTo("");
|
||||
}
|
||||
|
||||
async void Submit()
|
||||
{
|
||||
bool isCorrect = Answers.Any(x => x.isCorrect && x.isSelected);
|
||||
CCharStats correctCCharStats = GetCorrectCCharStats();
|
||||
CChar correctCChar = correctCCharStats.cchar;
|
||||
|
||||
if (isCorrect)
|
||||
{
|
||||
Snackbar.Add($"<b>Definition:</b> {correctCChar.definition}", Severity.Success, config => { config.VisibleStateDuration = 1000; });
|
||||
increaseCCharStat(GetCorrectCCharStats(), StatType.NumOfCorrects);
|
||||
}
|
||||
else
|
||||
{
|
||||
Snackbar.Add(
|
||||
@<div>
|
||||
<h3>Incorrect!</h3>
|
||||
<ul>
|
||||
<li>CChar: @correctCChar.charcter</li>
|
||||
<li>Correct answer: @correctCChar.pinyin.ToTitleCase()</li>
|
||||
<li>Meaning: @correctCChar.definition</li>
|
||||
</ul>
|
||||
</div>
|
||||
, Severity.Error);
|
||||
increaseCCharStat(GetCorrectCCharStats(), StatType.NumOfWrongs);
|
||||
}
|
||||
|
||||
if (correctCCharStats.TotalAnswers >= 3)
|
||||
{
|
||||
if (correctCCharStats.Accuracy > 0.7f)
|
||||
{
|
||||
RemoveCCharFromSelection(true);
|
||||
|
||||
Snackbar.Add($"CChar '{correctCChar.charcter}' compleated!", Severity.Success);
|
||||
}
|
||||
}
|
||||
|
||||
GenerateQuestion();
|
||||
}
|
||||
|
||||
public class Answer
|
||||
{
|
||||
public Answer()
|
||||
{
|
||||
}
|
||||
|
||||
public Answer(CChar cchar, bool isCorrect)
|
||||
{
|
||||
this.cchar = cchar;
|
||||
this.isCorrect = isCorrect;
|
||||
}
|
||||
|
||||
public CChar cchar { get; set; }
|
||||
public bool isCorrect { get; set; } = false;
|
||||
public bool isSelected { get; set; } = false;
|
||||
}
|
||||
|
||||
public char GetDisplayChar()
|
||||
{
|
||||
char? cc = GetCorrectCChar().charcter;
|
||||
if (cc == null) return ' ';
|
||||
else return (char)cc;
|
||||
}
|
||||
|
||||
public CChar GetCorrectCChar()
|
||||
{
|
||||
CChar cchar = Answers.FirstOrDefault(x => x.isCorrect)?.cchar;
|
||||
return cchar;
|
||||
}
|
||||
|
||||
public CCharStats GetCorrectCCharStats()
|
||||
{
|
||||
CChar correctChar = GetCorrectCChar();
|
||||
CCharStats correctCCharStats = DontSkipTheseCChar.First(x => x.cchar == correctChar);
|
||||
return correctCCharStats;
|
||||
}
|
||||
public void increaseCCharStat(CCharStats stats, StatType statType)
|
||||
{
|
||||
int correctStatsIndex = DontSkipTheseCChar.IndexOf(stats);
|
||||
switch (statType)
|
||||
{
|
||||
case StatType.NumOfCorrects:
|
||||
DontSkipTheseCChar[correctStatsIndex].NumOfCorrects++;
|
||||
break;
|
||||
|
||||
case StatType.NumOfWrongs:
|
||||
DontSkipTheseCChar[correctStatsIndex].NumOfWrongs++;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
public void RemoveCCharFromSelection(bool ignoreSelection = false)
|
||||
{
|
||||
CCharStats correctCCharStats = GetCorrectCCharStats();
|
||||
|
||||
|
||||
if (!selectedCorrect && !ignoreSelection)
|
||||
{
|
||||
Snackbar.Add("Selected is wrong. Try again!", Severity.Error);
|
||||
return;
|
||||
}
|
||||
else if (!ignoreSelection)// Hacky way to only display this snackbar when is manually removed
|
||||
{
|
||||
Snackbar.Add($"Removed '{correctCCharStats.cchar.charcter}' from selection", Severity.Info, config => config.VisibleStateDuration = 3000);
|
||||
}
|
||||
|
||||
DontSkipTheseCChar.Remove(correctCCharStats);
|
||||
Console.WriteLine("Remaining CChars: " + DontSkipTheseCChar);
|
||||
Program.CCharsLeft = DontSkipTheseCChar.Count;
|
||||
Program.InvokeUiUpdate();
|
||||
GenerateQuestion();
|
||||
}
|
||||
|
||||
public void ShowMeaning()
|
||||
{
|
||||
Snackbar.Add($"<b>Definition:</b> {GetCorrectCChar().definition}", Severity.Info);
|
||||
}
|
||||
|
||||
public void ShowPinyin()
|
||||
{
|
||||
Snackbar.Add($"<b>Pinyin:</b> {GetCorrectCChar().pinyin.ToTitleCase()}", Severity.Info);
|
||||
}
|
||||
|
||||
SpeechSynthesisVoice? SpeechVoice;
|
||||
|
||||
protected async override Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
// Gets chinese voice on windows or iphone.
|
||||
this.SpeechVoice = ((IEnumerable<SpeechSynthesisVoice>)(await this.SpeechSynthesis.GetVoicesAsync())).FirstOrDefault(v => v.Name.Contains("Yaoyao") || v.Name.Contains("Ting-Ting"));
|
||||
this.StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
async Task SayCorrectChar()
|
||||
{
|
||||
if (SpeechVoice == null)
|
||||
{
|
||||
Snackbar.Add("Couldn't play sound", Severity.Error);
|
||||
return;
|
||||
}
|
||||
|
||||
var utterancet = new SpeechSynthesisUtterance
|
||||
{
|
||||
Text = this.GetCorrectCChar().charcter.ToString(),
|
||||
Voice = this.SpeechVoice,
|
||||
Rate = 0.75f
|
||||
};
|
||||
|
||||
await this.SpeechSynthesis.SpeakAsync(utterancet); // 👈 Speak with "Haruka"'s voice!
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue